React onSubmit提交时写入Firestore指定集合失败如何解决

你写的React版代码有两个核心错误，导致写入失败：

• doc()方法要求传入的路径段必须为集合-文档交替的偶数段，你传入的"users"、userId、"pred"共3段，指向的是pred集合本身，集合不支持直接用setDoc写入，必须指向集合下的具体文档。
• 逻辑和可正常运行的Angular版本不匹配：Angular代码是遍历所有比赛数据，以match.matchday作为pred集合下的文档ID，每个文档内以match.matchId为键，用merge模式增量更新字段，而非把整个fixtures数组一次性写入。

代码逻辑完全对齐你之前Angular版本的行为，确保你已经从Firestore SDK导入了所需方法即可：

// 按需导入Firestore方法
import { doc, setDoc } from "firebase/firestore";

const onSubmit = async () => {
  const userId = user?.uid;
  if (!userId) return;

  // 对齐Angular版本的遍历逻辑
  const valueGroups = Object.values(predictions.fixtures);
  for (const group of valueGroups) {
    // 兼容分组为数组/对象的场景
    const matchList = Array.isArray(group) ? group : Object.values(group);
    for (const match of matchList) {
      // 构造合法文档路径：users/{uid}/pred/{matchday}
      const docRef = doc(
        db,
        "users",
        userId,
        "pred",
        String(match.matchday) // 统一转字符串，避免数字/字符串类型ID冲突
      );
      // 开启merge，和Angular版本行为一致
      await setDoc(docRef, { [match.matchId]: match }, { merge: true });
    }
  }
  console.log("提交完成", predictions.fixtures);
};

• Firestore写入是异步操作，必须加async/await，避免写入未完成就重置状态、跳转页面导致请求中断。
• 如果单批次写入数据量较大，可以替换为writeBatch批量提交，减少网络请求开销，注意单批次操作上限为500条。
• 写入前可以加字段校验，避免matchday或matchId为空生成异常文档ID。

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