First things first, make sure Firebase Firestore is all set up and ready to go in your app. This is super important for handling document deletions and cascading deletes.

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

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

To delete a document from Firestore, you'll use the deleteDoc function. Just give it the path to the document you want to delete.

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

async function deleteDocument(docPath) {
  await deleteDoc(doc(db, docPath));
}

For cascading deletes, you'll need a recursive function to delete all sub-collections and their documents before you delete the parent document. Think of it like cleaning up a room before you move out.

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

async function deleteCollection(collectionRef) {
  const snapshot = await getDocs(collectionRef);
  
  snapshot.forEach(doc => {
    // For each document, check and recursively delete subcollections
    const subcollections = doc.ref.listCollections();
    subcollections.forEach(async (subcollectionRef) => {
      await deleteCollection(subcollectionRef);
    });
    // Finally, delete the document
    await deleteDoc(doc.ref);
  });
}

Now, let's integrate the cascading delete logic into the main delete function.

async function deleteDocumentWithCascade(docPath) {
  const docRef = doc(db, docPath);
  const collections = await docRef.listCollections();
  
  // Deleting each subcollection first
  for (const subcollection of collections) {
    await deleteCollection(subcollection);
  }
  
  // Deleting the document after all subcollections are deleted
  await deleteDoc(docRef);
}

To delete a specific document and its sub-collections, use the delete with cascade function and pass the document's path.

deleteDocumentWithCascade('path/to/document')
  .then(() => {
    console.log('Document and all its subcollections have been deleted successfully.');
  })
  .catch((error) => {
    console.error('Error deleting document: ', error);
  });

For more complex logic or to ensure deletions happen on the server-side, you can use Firebase Functions.

1. Create a Firebase Function to handle cascading deletes:

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
const db = admin.firestore();

exports.deleteDocumentWithCascade = functions.https.onCall(async (data, context) => {
  const docPath = data.docPath;
  const docRef = db.doc(docPath);
  const collections = await docRef.listCollections();
  
  for (const collection of collections) {
    await deleteCollection(collection);
  }

  await docRef.delete();
});

async function deleteCollection(collectionRef) {
  const snapshot = await collectionRef.get();

  for (const doc of snapshot.docs) {
    const subcollections = await doc.ref.listCollections();
    for (const subcollection of subcollections) {
      await deleteCollection(subcollection);
    }
    await doc.ref.delete();
  }
}

1. Call the Firebase Function from the app:

import { getFunctions, httpsCallable } from "firebase/functions";

const functions = getFunctions();
const deleteWithCascade = httpsCallable(functions, 'deleteDocumentWithCascade');

deleteWithCascade({ docPath: 'path/to/document' })
  .then(() => {
    console.log('Document and all its subcollections have been deleted successfully.');
  })
  .catch((error) => {
    console.error('Error deleting document: ', error);
  });