Firebase V9 Firestore Update Document Data Using setDoc()

There are two methods you can use to update an existing document in Firebase Version 9 Cloud Firestore.

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

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

• Create A Firebase Project from Firebase Console
• Register an app for Web --JavaScript
• Add Firebase SDK to JavaScript Web App

Using the setDoc() method, you can update:

• Entire existing document or
• Specific document field in the Firestore Database.

In addition to that, you can also add a brand new document to a collection using setDoc() method.

Firestore Update Entire Document

Here is the sample data stored in the Cloud Firestore.

Let’s update an entire document using the setDoc() method.

In order to update data entirely using the setDoc() method, we need three methods.

• getDatabase() → where we want to update a document.
• doc() → where we’ll be passing references of database, collection and ID of a document that we want to update.
• setDoc() → where we actually pass new data that we want to replace along with the doc() method.

Import Firestore Database and de-structure the three methods we need:

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

Initialize Firestore Database:

const db = getFirestore(app);

Doc() Method

The first argument of the setDoc() method is the doc() method.

This doc() method takes three arguments.

• database → db
• collection name → cities
• document ID → p4eZc05QV43InigxALJ (ID of a document – see screenshot above)

Call the doc() method and pass database references (db), collection name (cities) and document ID (p4eZc05QV43InigxALJ).

Assign it to a constant called docRef.

const docRef = doc(db, "cities", "p4eZc05QV43InigxALJ");

Document Data {}

The second argument of the setDoc() method is the actual data that we want to update an existing document entirely inside the cities collection.

As you can see the new data has complete different than the existing document data in the Firestore database including the field name.

const data = {
  title: "Vancouver",
  provinceName: "British Columbia",
  countryCode: "CA"
};

SetDoc() Query To Update A Document

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

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

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

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

const docRef = doc(db, "cities", "p4eZc05QV43InigxALJ");

const data = {
  title: "Vancouver",
  provinceName: "British Columbia",
  countryCode: "CA"
};

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

Run the setDoc() query…

And you can see an existing document has been update entirely inside the cities collection including field names.

When you use the setDoc() method with an existing ID, it will delete the entire document data and replace it with the newly provided data.

Firestore Update Document Field

What if we want to just update a value of a specific field in an existing document.

To do that, all we have to do is add a third argument to the setDoc() method.

It will be a JavaScript object with a single property:

merge:true

import { getFirestore, doc, setDoc } from "firebase/firestore";
...
setDoc(docRef, data, { merge:true })
.then(docRef => {
    console.log("Document Field has been updated successfully);
})
.catch(error => {
    console.log(error);
})

When we add merge:true, the setDoc() method has 4 significant behaviours which are:

1. If the data object is empty, the query does nothing in the Firestore document when merge:true is set.
2. If the data object has an existing field name and value matching exactly in the Firestore document, the query does nothing.
3. If the data object has any existing field name with the new value, the query will update a value of that field in the Firestore document.
4. If the data object has a field name with a value that does not exist in the Firestore document, the query will add that field to the document.