Firebase V9 Firestore UPDATE Document Data Using updateDoc()

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

setDoc()
updateDoc() → you’re here

Using updateDoc(), you can only update the document field of an existing document in the Firestore Database which can be:

• Adding a new document field
• Updating a value of an existing document field
• Deleting a Document Field

Add A New Document Field Using updateDoc()

Here is a sample document inside the cities collection from the Cloud Firestore Database.

In order to update an existing document using the updateDoc() 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 one its fields.
• updateDoc() → 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, updateDoc } from "firebase/firestore";

Initialize Firestore Database and store it in a constant called db.

const db = getFirestore();

The updateDoc() method takes two arguments which are:

• doc() – Where we pass database, collection and document ID references
• data {} – Where we pass the actual data that we want to update into an existing document

Doc() Method

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

This doc() method takes three arguments.

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

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

Assign it to a constant called docRef.

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

Document Data {}

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

Let’s say I want to add a new document field called code with a value of 613.

Declare a constant called data and assign a JavaScript object with the one property that we want to add to the existing document.

In this case, code.

const data = {
  code: "613"
};

Make An updateDoc() Query

Now that we have both arguments we need to perform updateDoc() query to update an existing document by adding a new document field.

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

// Your Firebase SDK Initialization code here

const db = getFirestore(); // initialize Firestore

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

const data = {
  code: "613"
};

updateDoc(docRef, data)
.then(docRef => {
    console.log("A New Document Field has been added to an existing document");
})
.catch(error => {
    console.log(error);
})

Update A Value Of Document Field Using updateDoc()

You can also update an existing document field with a new value.

Let’s change the value of Ontario to ON in the province field.

All you have to do is add the exact document field name, found in the Firestore Database inside the data object, with a new value ON.

import { getFirestore, doc, updateDoc } from "firebase/firestore";
...
const data = {
  province: "ON"
};

updateDoc(docRef, data)
.then(docRef => {
    console.log("Value of an Existing Document Field has been updated");
})
.catch(error => {
    console.log(error);
})

There are two scenarios in which the updateDoc() query does not affect any existing document in Cloud Firestore if you want to update:

• Empty JavaScript Object {} or
• Existing Document Field with old value.

In addition to adding a new document field and updating a value of an existing document, you can delete one or more document Field(s) using updateDoc().