React.js下Firebase Realtime Database删除数据失败如何解决

现有代码核心错误 #

• 变量名拼写错误：你声明的存储接口返回数据的变量为firebaseData，但for...in循环遍历的是未定义的dataFirebase，循环逻辑完全不会执行，自然不会触发删除操作
• 实例调用错误：你定义的firebase变量仅存储了数据库URL字符串，不是Firebase SDK初始化后的数据库实例，不具备get、ref、remove等API方法，调用会直接抛出异常
• 逻辑冗余：全量拉取booksData节点所有数据再遍历匹配的方式效率极低，数据量大时会严重浪费带宽和性能

正确实现步骤 #

第一步：初始化Firebase数据库实例 #

你需要先引入Firebase SDK并完成初始化，才能调用相关操作API：

// 导入Firebase核心和实时数据库依赖
import { initializeApp } from "firebase/app";
import { getDatabase, ref, query, orderByChild, equalTo, get, remove } from "firebase/database";

// 替换为你自己Firebase控制台的配置信息
const firebaseConfig = {
  apiKey: "你的API密钥",
  projectId: "booktakeaway-dd150",
  databaseURL: "https://booktakeaway-dd150-default-rtdb.europe-west1.firebasedatabase.app",
};

// 初始化数据库实例
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

第二步：优化后的删除逻辑 #

直接通过数据库查询过滤目标节点，无需拉取全量数据：

return async dispatch => {
  try {
    // 构造查询条件，直接过滤bookId等于目标id的节点
    const targetBooksQuery = query(
      ref(db, 'booksData'),
      orderByChild('bookId'),
      equalTo(id)
    );
    const querySnapshot = await get(targetBooksQuery);
    
    // 批量删除所有匹配节点
    if (querySnapshot.exists()) {
      const deleteTasks = [];
      querySnapshot.forEach(childNode => {
        deleteTasks.push(remove(childNode.ref));
      });
      await Promise.all(deleteTasks);
      console.log("Done");
    }

    await dispatch(getSavedBooksIDs());
  } catch (error) {
    console.error("删除操作报错：", error);
  }
};

参考数据库结构 #

内容的提问来源于stack exchange，提问作者Valerio Battilà