🔥 Free Firestore CRUD Queries Cheatsheet 👉 Get the PDF ×

Firebase Version 9 Tutorial (Modular)

INTRODUCTION

Add Firebase 10 to JavaScript Web App new

Add Firebase SDK via CDN coming soon

Add Firebase SDK via NPM new

FIRESTORE DATABASE

Firebase 10 DATA MODELING new

Firebase 10 ADD DATA addDoc() new

Firebase 10 ADD DATA setDoc() new

Firebase 10 UPDATE DATA setDoc() new

Firebase 10 UPDATE DATA updateDoc() new

Firebase 10 DELETE Document Field updateDoc() new

Firebase 10 DELETE Document delectDoc() new

Firebase 10 GET all Documents getDocs() new

Firebase 10 GET All Documents With Real-Time Updates onSnapshot() new

Firebase 10 GET A Document By ID getDoc() new

Firebase 10 WHERE Query new

Firebase 10 v9 vs v8 Query Comparison new

🔐 FIREBASE AUTHENTICATION

Firebase 10 Create A User Account using createUserWithEmailAndPassword() new

Firebase 10 Check User Authentication State Using onAuthStateChanged()new

Firebase 10 Sign In A User Account Using signInWithEmailAndPassword()new

Firebase 10 Sign Out A User Using signOut()new

Firebase 10 Get User Data From Cloud Firestore new

Firebase Version 8 Tutorial (Namespaced)

REAL-TIME DATABASE (RTDB)

Build A CRUD Web App With RTDB Part #1

Build A CRUD Web App With RTDB Part #2

Real-Time Database Querying, Sorting & Filtering

CLOUD FIRESTORE

Cloud Firestore Querying, Sorting & Filtering

Cloud Firestore Get Logged-in User Data

Cloud Firestore Partially Update A Document

SECURITY RULES (FIRESTORE)

5 Must-Know Security Rules Explained

CLOUD FUNCTIONS

Create Your First Cloud Function (HTTP Trigger)

Send Email Using Firebase Functions & Nodemailer

Add Subscriber To MailChimp Using Cloud Functions

VUE JS + FIREBASE

Create A Login Page Quickly Using FirebaseUI

Build A Complete To-Do Authentication App

Build A Restaurant Menu Page

Learn Role Based Authentication & Authorization

Create Stripe Checkout Payment Form

Track Users Location Real-Time

Deploy Vue.js App To Firebase Hosting

Remove Dev Mode Warning

Last modified on December 29th, 2025

Raja Tamil

5,924 views

2 Comments

Firebase Javascript

5,924

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

Firestore setDoc() Explained – Custom ID vs Auto ID (JavaScript) - YouTube

Tap to unmute

Firestore setDoc() Explained – Custom ID vs Auto ID (JavaScript) SoftAuthor

SoftAuthor2.12K subscribers

addDoc()
setDoc() → you’re here

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

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";

JavaScript

Copy

getFirestore() → Firestore database where we want to add data as a document.
collection() → Where we want to add collection nam e and database references.
setDoc() → Where we actually pass our data along with the collection name and db references.

Initialize Firestore database:

const db = getFirestore(app);

JavaScript

Copy

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");

JavaScript

Copy

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"
};

JavaScript

Copy

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

JavaScript

Copy

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";

JavaScript

Copy

getFirestore() → Firestore database where we want to add data as a document.
doc() → Where we want to add collection name and database references as well as our custom document ID.
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 → my.custom.id@gmail.com ( 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 (my.custom.id@gmail.com) as arguments.

Assign it to a constant called docRef.

const docRef = doc(db, "countries", "my.custom.id@gmail.com" );

JavaScript

Copy

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"
};

JavaScript

Copy

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", "my.custom.id@gmail.com" );

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

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

JavaScript

Copy

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.

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

4 years ago
2 comments

In this Firebase version 9 tutorial, you're going to learn how to add Firebase …

5 years ago
3 comments

Add an image as a background of an HTML element then resizing and …

4 years ago
1 comment

In this short tutorial, I'm going to show how to implement Marker …

3 years ago
1 comment

The onAuthStateChanged() method is triggered when a user's authentication state …

5 years ago
3 comments

Learn how to create responsive multi-column (single, two and three …

5 years ago
8 comments

Learn how to create reusable and scalable form validation for Signup and login …

4 years ago
14 comments

Learn how to get a specific document data by its id using getDoc() method in …

3 years ago
1 comment

Learn how to fix Uncaught ReferenceError: google is not defined error when …

❯

tempest.services.disqus.com

tempest.services.disqus.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Join the discussion…

Comment

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
Contact me or enable others to contact me by email with offers for goods or services
Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

1
Discussion Favorited!

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Best
- Newest
- Oldest

There is a tiny error in the article, you wrote getDatabase instead of getFirestore in the Add Data Using setDoc() With Auto-ID part and the Add Data Using setDoc() With Custom-ID part.

Ah! Thank you for the catch. Fixed it! :)

Show more replies

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Twitter Widget Iframe

Firebase Version 9 Tutorial (Modular)

Firebase Version 8 Tutorial (Namespaced)

Add Data Using setDoc() With Auto-ID

Collection() Method

Document Data {}

Make A setDoc() Query

Add Data Using setDoc() With Custom-ID

Doc() Method

Document Data {}

Make A setDoc() Query

tempest.services.disqus.com is blocked

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Discussion Favorited!

live.rezync.com is blocked

pippio.com is blocked