Deleting fields in Firebase - Mini Project: Build & Apply

Deleting Fields in Firebase Firestore Documents

📖 Scenario: You are managing a Firebase Firestore database for a small online store. Some product documents have an outdated field called discount that is no longer used. You want to clean up the database by deleting this discount field from all product documents.

🎯 Goal: Build a Firebase Firestore script that deletes the discount field from a single product document.

📋 What You'll Learn

Create a reference to a Firestore document with a specific product ID

Create an update object that deletes the discount field

Use the Firestore update method to remove the field

Ensure the code is valid and deployable in a Firebase environment

💡 Why This Matters

🌍 Real World

Cleaning up outdated fields in Firestore documents helps keep the database organized and reduces storage costs.

💼 Career

Knowing how to update and delete fields in Firestore is essential for Firebase developers managing real-time databases.

1

Create a Firestore document reference

Create a variable called productRef that references the Firestore document at collection products with document ID prod123. Use doc(db, "products", "prod123").

Firebase

import { doc, updateDoc } from "firebase/firestore";
import { db } from "./firebaseConfig";

// Create productRef to the document 'prod123' in 'products' collection
// Your code here

Need a hint?

Use the doc function with db, collection name, and document ID.

2

Create an update object to delete the discount field

Create a variable called updateData that deletes the discount field using deleteField() from firebase/firestore. Import deleteField and set updateData to { discount: deleteField() }.

Firebase

import { doc, updateDoc, deleteField } from "firebase/firestore";
import { db } from "./firebaseConfig";

const productRef = doc(db, "products", "prod123");

// Create updateData to delete 'discount' field
// Your code here

Need a hint?

Import deleteField and use it to set the field value to be deleted.

3

Use updateDoc to delete the field

Call updateDoc with productRef and updateData to delete the discount field from the document.

Firebase

import { doc, updateDoc, deleteField } from "firebase/firestore";
import { db } from "./firebaseConfig";

const productRef = doc(db, "products", "prod123");

const updateData = { discount: deleteField() };

// Call updateDoc to delete the discount field
// Your code here

Need a hint?

Use await updateDoc(productRef, updateData) to apply the update.

4

Add async function wrapper

Wrap the update code inside an async function called removeDiscountField and export it. The function should contain the await updateDoc(productRef, updateData) call.

Firebase

import { doc, updateDoc, deleteField } from "firebase/firestore";
import { db } from "./firebaseConfig";

// Wrap the update code inside an async function called removeDiscountField
// Your code here

Need a hint?

Define and export an async function that performs the update.