Efficient CRUD Operations in TypeScript with Firebase Firestore

When building modern web applications, efficiently managing data is crucial. Firebase Firestore, a flexible, scalable database for mobile and web apps, paired with TypeScript, provides a robust solution for handling CRUD (Create, Read, Update, Delete) operations. Whether you’re developing a new project or enhancing an existing application, this guide will walk you through implementing efficient CRUD operations using TypeScript with Firebase Firestore. By the end, you’ll have the tools you need to manage your application’s data smoothly and securely. Let’s dive in!

Here’s an example of how you can implement CRUD (Create, Read, Update, Delete) operations using TypeScript with Firebase Firestore:

Set up Firebase in your TypeScript project

Create a firebase.ts file to configure and initialize Firebase:

npm install firebase @firebase/firestore

Firebase Configuration

Create a firebase.ts file to configure and initialize Firebase:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firestore
const db = getFirestore(app);

export { db };

Create (Add a Document)

To create a new document in a Firestore collection, use the addDoc or setDoc method:

import { collection, addDoc } from "firebase/firestore";
import { db } from "./firebase";

// Example function to add a document
async function addUser() {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      name: "John Doe",
      email: "john.doe@example.com",
      age: 30,
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

addUser();

Read (Get Documents)

To read documents from Firestore, use the getDocs method:

import { collection, getDocs } from "firebase/firestore";
import { db } from "./firebase";

// Example function to fetch documents
async function getUsers() {
  const querySnapshot = await getDocs(collection(db, "users"));
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => `, doc.data());
  });
}

getUsers();

Update (Modify a Document)

To update a document, use the updateDoc method:

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

// Example function to update a document
async function updateUser(userId: string) {
  const userRef = doc(db, "users", userId);

  try {
    await updateDoc(userRef, {
      name: "Jane Doe",
      age: 32,
    });
    console.log("Document successfully updated!");
  } catch (e) {
    console.error("Error updating document: ", e);
  }
}

updateUser("USER_DOCUMENT_ID");

Delete (Remove a Document)

To delete a document, use the deleteDoc method:

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

// Example function to delete a document
async function deleteUser(userId: string) {
  const userRef = doc(db, "users", userId);

  try {
    await deleteDoc(userRef);
    console.log("Document successfully deleted!");
  } catch (e) {
    console.error("Error deleting document: ", e);
  }
}

deleteUser("USER_DOCUMENT_ID");

Types: Since you’re using TypeScript, you can define types for your data to maintain type safety:

type User = {
  name: string;
  email: string;
  age: number;
};

Async/Await: All Firebase Firestore operations return promises, so it’s essential to handle them asynchronously.