Firebase V9 Firestore Add Data Using setDoc()

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

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

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

Using the setDoc() method, you can add a document to the Firestore database by creating:

• Auto-generated ID or
• Custom ID

Add Data Using setDoc() With Auto-ID

In order to use the setDoc() method, we need to import three methods from the Firebase Firestore Import Statement.

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

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. setDoc() → Where we actually pass our data along with the collection name and db references.

Initialize Firestore database:

const db = getFirestore(app);

Collection() Method

The first argument of setDoc() method is the 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 (countries) in quotes to it.

Assign it to a constant called dbRef.

const dbRef = collection(db, "countries");

Document Data {}

The second argument of the setDoc() method is the actual data that we want to store as a document inside the countries 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: "Ottawa",
   country: "Canada",
   province: "ON"
};

Make A setDoc() Query

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

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

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

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

setDoc(dbRef, data)
.then(docRef => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})

Run the setDoc() query…

And you can see a brand new document has been created inside the countries collection with an auto-generated document ID.

Add Data Using setDoc() With Custom-ID

With the setDoc() method, we can create our own custom document ID when adding data to Firestore database.

Instead of using the collection() method, we need to use the doc() method.

import { getFirestore, doc, setDoc } from "firebase/firestore";

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

Doc() Method

The first argument of the setDoc() method when creating a custom document ID will be doc() method.

This doc() method takes three arguments.

• database → db
• collection name → countries
• custom document ID → [e-mail] (this could be anything you would like)

Invoke the doc() method and pass database (db) reference and collection name (cities) in quotes and your own custom document ID ([e-mail]) as arguments.

Assign it to a constant called docRef.

const docRef = doc(db, "countries", "[e-mail]" );

Document Data {}

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

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

const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};

Make A setDoc() Query

Let’s call the setDoc() method and pass docRef and data as arguments to it.

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

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

const docRef = doc(db, "countries", "[e-mail]" );

const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};

setDoc(docRef, data)
.then(() => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})

Run the setDoc() query…

And you can see a brand new document has been created inside the countries collection, but this time with our own custom document ID.

Note: One of the cases for using a custom document ID would be an email address as they’ll be unique to each user.

However, it’s often recommended to let Firestore create the Auto-generated Document ID in order to avoid accidental duplications.

Using setDoc() method, you can also update existing document data.