Firebase V9 Firestore Add Document Data Using addDoc() [2022]

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

• addDoc() → you’re here
• setDoc()

Other Firebase 9 Tutorials in this series:

• Update Document Data Using setDoc()
• UPDATE Document Data Using updateDoc()
• DELETE Document Field Using updateDoc()
• DELETE Document Using deleteDoc()
• GET ALL DOCUMENTS Data From A Collection
• Get A Document By ID Using getDoc()

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

1. Create A Firebase Project from Firebase Console
2. Register an app for Web - JavaScript
3. 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.

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

Initialize Firestore Database

Initialize Firestore database and store it in constant called db

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.

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?

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.

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.

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.

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.

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().