Firebase V9 Firestore Add Document Data Using addDoc() [2022]
Tags: javascript, firebase, webdev, beginners
Published: 2022-07-04 11:56:39

---
canonical_url: https://softauthor.com/firebase-firestore-add-document-data-using-adddoc/
---

There are **two methods** that we can use to **add document data** to the **Firebase Version 9 Cloud Firestore**.

- **addDoc()** → _you’re here_
- [setDoc()](https://softauthor.com/firebase-firestore-add-document-data-using-setdoc/)

Other Firebase 9 Tutorials in this series:

- [Update Document Data Using setDoc()](https://softauthor.com/firebase-cloud-firestore-update-document-data/)
- [UPDATE Document Data Using updateDoc()](https://softauthor.com/firebase-firestore-update-document-data-updatedoc/)
- [DELETE Document Field Using updateDoc()](https://softauthor.com/firebase-firestore-delete-document-field/)
- [DELETE Document Using deleteDoc()](https://softauthor.com/firebase-firestore-delete-document-deletedoc/)
- [GET ALL DOCUMENTS Data From A Collection](https://softauthor.com/firebase-firestore-get-documents-data-in-collection/)
- [Get A Document By ID Using getDoc()](https://softauthor.com/firebase-firestore-get-document-by-id/)

**Note:** Before going further, you’ll need to do **three** things:

1. [Create A Firebase Project from Firebase Console](https://softauthor.com/add-firebase-to-javascript-web-app/#create-a-firebase-project-from-firebase-console)
2. [Register an app for Web - JavaScript](https://softauthor.com/add-firebase-to-javascript-web-app/#register-app-for-web)
3. [Add Firebase SDK to JavaScript Web app](https://softauthor.com/add-firebase-to-javascript-web-app/#add-firebase-sdk-to-javascript-web-app)

In order to use the **addDoc()** method, we need to import three methods from the Firebase **Firestore import statement**.

1. **getDatabase()** → Firestore **database** where we want to add data as a document.
2. **collection()** → Where we want to add **collection name** and **database** references.
3. **addDoc()** → Where we actually pass our **data** along with the **collection name** and **db** references.

```JavaScript
import { getFirestore, collection, addDoc } from "firebase/firestore";
```

###Initialize Firestore Database

**Initialize** Firestore database and store it in constant called **db**

```JavaScript
const db = getFirestore(app);
```

The **addDoc()** method will take two arguments:

- **collection()** – pass **database** and **collection name** references as arguments to it.
- **data {}** – data that we want to add to a **collection** as one of its **documents**.

###Collection() Method

This **collection()** method also takes two arguments.

- **database** → **db**
- **collection name** → **users**

Invoke the **collection()** method and pass database references **(db)** and collection name **(users)** in quotes to it.

Assign it to a constant called **dbRef**.

```JavaScript
const dbRef = collection(db, "users");
```

As you can see, Firestore Database does not have the collection name **users**

_You may wonder…_

>_How can we add data to a collection that does not exist in the Firestore Database?_

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-18-at-10.36.01-AM-1024x567.png)

In the Firestore Database, **you can only add one or more documents inside a collection**.

But you **won’t be able** to **add the collection itself** without any **document**.

When you add data as a document to a collection, the **addDoc()** method will try to find the collection name specified in the **collection()** method.

In this case **users**.

If it’s unable to find the collection name **users**,

It will create a new collection called **users** and add the data inside it as a **document**.

###Document Data {}

The **second argument** of the **addDoc()** method is the **actual data** that we want to store as a **document** inside the **users** collection.

The good news is that we can simply store a **JavaScript object** as document data inside the Firestore database.

So let’s create a JavaScript object with a couple of **key-value pairs** aka **properties**.

```JavaScript
const data = {
   name: "Raja Tamil",
   country: "Canada"
};
```

###Add Document Data Using addDoc()

Now we have both arguments we need in order to use **addDoc()** method successfully.

Let’s call the **addDoc()** method and pass **dbRef** and **data** as arguments to it.

```JavaScript
import { getFirestore, collection, addDoc } from "firebase/firestore";
...
addDoc(dbRef, data)
.then(docRef => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})
```

Run the app.

Switch back to the **Firestore Database** page, then refresh and you can see we’ve successfully added data to the Firestore Database.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-V9-Firestore-Add-Document-Data-Using-addDoc-1-1024x564.png)

It has three columns.

- **First column** → **users** collection.
- **Second column** → Firebase automatically created a **unique document id** which is normally an **alpha numeric** value.

This is super useful because we can identify any document in the **users** collection using this auto-id or document id.

- **Third column** → **Actual data** stored as a document in a key-value pair format.

###Get The Document ID Using addDoc()

Sometimes, you would want to **get the auto-generated document ID** immediately right after **data** has been **added** to the **Firestore Database**.

Luckily, you can do that using the **addDoc()** method.

In order to get the auto-generated ID from the response, all we have to do is access the **id** property on the **docRef** object.

```JavaScript
addDoc(dbRef, data)
.then(docRef => {
    console.log(dbRef.id); //p4eZcO5QV43IYnigxALJ
})
.catch(error => {
    console.log(error);
})
```

There are times when you want to add document data to Cloud Firestore using your **own custom document id**, such as email, etc instead of an **auto-generated id**.

Luckily, we can do that using the other method called **setDoc()**.