React中Firebase数据库更新失败求助：代码语法问题排查

你的代码存在两处核心API使用错误，导致无法正常操作Firebase数据库，同时缺少错误捕获逻辑，以下是具体分析和修正方案：

关键错误点 #

1. API方法误用：updateDoc用于更新已存在的文档，而你是要新增数据，应该用setDoc（自定义文档ID）或addDoc（自动生成ID）。
2. 路径引用错误：collection(db, namirnice/${uuid})写法错误，namirnice/${uuid}是单个文档的路径，不是集合路径，需用doc(db, 'namirnice', uuid)创建文档引用。
3. 无错误捕获：异步函数未包裹try/catch，报错时无法定位具体问题。

修正后的代码示例 #

场景1：自定义文档ID（使用你生成的uuid） #

const addNewData = async (e) => {
  e.preventDefault();

  try {
    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 = uid();
    // 用doc创建文档引用，setDoc实现新增/覆盖文档
    await setDoc(doc(db, 'namirnice', uuid), data);
    
    close();
  } catch (error) {
    console.error('新增数据失败:', error);
    // 可在此添加用户可见的错误提示
  }
};

场景2：自动生成文档ID（推荐，无需手动生成uuid） #

const addNewData = async (e) => {
  e.preventDefault();

  try {
    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
    };  
    // addDoc自动生成文档ID，直接传入集合引用即可
    await addDoc(collection(db, 'namirnice'), data);
    
    close();
  } catch (error) {
    console.error('新增数据失败:', error);
  }
};

额外检查项 #

• 确认db已正确初始化（完成Firebase数据库连接配置）。
• 确认sifraRef等所有ref都通过useRef()创建并绑定到对应表单元素的ref属性。
• 确认Firebase安全规则允许当前用户对namirnice集合执行写入操作。

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