Firebase V9 Firestore UPDATE Document Data Using updateDoc()
Tags: firebase, javascript, webdev, beginners
Published: 2022-08-09 12:38:25

---
canonical_url: https://softauthor.com/firebase-firestore-update-document-data-updatedoc/
---

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

[setDoc()](https://softauthor.com/firebase-cloud-firestore-update-document-data/)
**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](https://softauthor.com/firebase-firestore-update-document-data-updatedoc/#add-new-document-field-updateDoc)
- [Updating a value of an existing document field](https://softauthor.com/firebase-firestore-update-document-data-updatedoc/#update-value-document-field-updatedoc)
- [Deleting a Document Field](https://softauthor.com/firebase-firestore-delete-document-field/)

###Add A New Document Field Using updateDoc()

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

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-V9-Firestore-UPDATE-Document-Data-Using-updateDoc-1024x604.png)

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:

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

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

```JavaScript
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**.

```JavaScript
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**.

```JavaScript
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**.

```JavaScript
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);
})
```

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-V9-Firestore-UPDATE-Document-Data-Using-updateDoc-Add-New-Document-Field-1024x479.png)

###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**.

```JavaScript
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);
})
```

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-V9-Firestore-UPDATE-Document-Data-Using-updateDoc-Add-New-Document-Field-Update-Value-of-Document-Field-1024x467.png)

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()](https://softauthor.com/firebase-firestore-delete-document-field/).