表单提交成功后如何递减Firestore字段值并解决where方法报错问题

错误原因 #

你遇到的报错和功能不生效问题有以下几个核心原因：

• 方法调用逻辑错误：where()是集合（Collection）层面的查询方法，你在collection("items").doc()之后调用该方法，doc()返回的是单个文档引用，本身不存在where方法，直接触发类型错误。
• where参数配置错误：第一个参数需要填你要匹配的Firestore字段名，按照你给出的数据结构，应该填字符串"item"，不是selectedItem变量。
• 异步逻辑缺失：Firestore的set、get、update都是异步方法，你没有加await等待操作完成，会出现时序问题，导致逻辑执行顺序不符合预期。
• 查询结果处理缺失：where返回的是查询快照对象，需要先获取匹配的文档实例，才能执行更新操作，不能直接对查询对象调用update方法。
• 函数调用传参错误：你定义incrementCounter时要求传入collref参数，但实际调用时没有传任何参数，且函数内部直接重写了入参，逻辑冗余。

修复后的代码 #

1. 调整表单提交逻辑 #

// 给handleSubmit添加async标识
const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const userRef = firestore.collection("users").doc(id);
    // 等待用户数据保存完成再执行库存扣减
    await userRef.set(
      {
        // 保留你原有要保存的用户字段
      },
      { merge: true }
    );
    console.log(" saved");
    // 把选中的商品作为参数传入库存更新方法
    await incrementCounter(selectedItem);
  } catch (err) {
    console.log(err);
  }
};

2. 调整库存更新方法 #

async function incrementCounter(selectedItem) {
  // 直接在items集合上做条件查询，不要调用doc()
  const itemQuery = firestore
    .collection("items")
    .where("item", "==", selectedItem);
  // 执行查询获取匹配结果
  const querySnapshot = await itemQuery.get();
  // 遍历匹配到的文档（保证item字段唯一的情况下只会返回1条）
  querySnapshot.forEach((doc) => {
    // 对匹配到的单个文档执行库存递减
    doc.ref.update({
      stocks: firestore.FieldValue.increment(-1),
    });
  });
}

额外注意事项 #

• 请保证items集合里的item字段值唯一，避免一次更新多个商品的库存。
• 建议给items集合的item字段加索引，提升查询效率。
• 生产环境建议给库存更新逻辑添加事务判断，避免超卖问题（比如库存为0时不再执行递减操作）。

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