如何在React.js中使用Firebase v9删除Firestore集合

Firebase v9 采用模块化 API 设计，与 v8 的链式调用逻辑不同，你需要额外导入 deleteDoc 方法完成文档删除操作，对应需求的完整实现如下：

// 导入 Firestore 模块化方法
import { collection, query, getDocs, deleteDoc, doc } from "firebase/firestore";
// 引入你项目中初始化完成的 Firestore 实例
import { db } from "./firebase/config";

// 删除指定集合的封装方法
const removeCollection = async (collectionName) => {
  const collectionQuery = query(collection(db, collectionName));
  const querySnapshot = await getDocs(collectionQuery);

  // 生成所有文档的删除异步任务，批量执行提升效率
  const deleteTasks = querySnapshot.docs.map(docItem => {
    return deleteDoc(doc(db, collectionName, docItem.id));
  });

  // 等待所有删除任务执行完成
  await Promise.all(deleteTasks);
}

// 调用示例：删除名称为 udata.id 的集合
await removeCollection(`${udata.id}`);

注意事项 #

• 上述方案仅适用于小容量集合（文档数≤500）的删除，若集合文档量较大，建议通过后端云函数实现递归批量删除，避免前端请求超时、触发流量限制。
• 你原有代码仅能读取数据的原因是未调用删除相关方法，Firebase v9 移除了 v8 版本中 doc.ref.delete() 的链式调用写法，所有操作都需要显式导入对应方法后执行。

内容的提问来源于stack exchange，提问作者Usama Shakeel