React集成Firebase添加数据时触发TypeError错误求助

问题根源 #

你遇到的TypeError: db._checkNotDeleted is not a function错误，核心是混淆了Firebase Realtime Database和Cloud Firestore的API，同时存在Firebase SDK版本不兼容的问题：

• ref()和set()是Firebase Realtime Database的专属方法，而你使用的是Cloud Firestore，两者API完全不通用。
• 若你使用的是Firebase v9+模块化SDK，旧版命名空间风格的写法会直接导致实例调用错误。

修正步骤 #

1. 确认Firebase导入及初始化正确 #

先确保在Firebase配置文件中正确初始化并导出Cloud Firestore实例：

// firebase-config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app);

同时在组件中导入正确的Firestore方法和uuid工具：

import { doc, setDoc } from "firebase/firestore";
import { firestore } from '../path-to/firebase-config';
import { v4 as uuidv4 } from 'uuid'; // 用于生成文档ID

2. 修正数据写入逻辑 #

将原来的ref()+set()替换为Firestore对应的doc()+setDoc()方法，注意Firestore的结构是集合->文档，必须指定集合名称（比如food-items），不能直接写/${uuid}：

const addNewData = async (e) => { // 加入async支持异步操作
  e.preventDefault();

  const data = {
    sifra: sifraRef.current.value,
    naziv: nazivRef.current.value,
    detalji_dijete: detaljiRef.current.value,
    opis: opisRef.current.value,
    broj_obroka: brojObrokaRef.current.value,
    napomena: napomenaRef.current.value
  };
  const uuid = uuidv4();
  
  // 写入Firestore：指定集合名、文档ID（uuid），传入数据
  await setDoc(doc(firestore, 'food-items', uuid), {
    ...data, // 展开数据字段（若不需要嵌套可直接传入data）
    uuid
  });
  
  close();
}

额外注意事项 #

• Firestore不允许直接在根目录创建文档，必须隶属于某个集合，所以必须指定集合名称。
• setDoc()是异步函数，需要用await等待写入完成后再执行close()，避免操作未完成就关闭模态框。
• 若你坚持使用旧版命名空间SDK（v8及以下），写法应为firebase.firestore().doc('collection/uuid').set(data)，但推荐使用v9+模块化SDK以优化打包体积。

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