React电商应用Firebase创建订单失败：addDoc()函数字段报错

错误原因 #

你遇到的Uncaught FirebaseError是因为调用addDoc()时，total字段传入的是函数本身（totalCompra），而Firestore不允许将函数作为字段值存储。组件渲染时你通过totalCompra()调用函数获取总价，但提交订单时直接传了函数引用，导致数据格式不符合要求。

修复步骤 #

修改finalizarCompra函数里的addDoc参数，把total: totalCompra改为total: totalCompra()，执行函数得到计算后的数值：

addDoc(ventasCollection, {
  items: cart,
  total: totalCompra(), // 加上()执行函数获取总价
}).then((result) => {setIdVenta(result.id)});

额外注意点 #

代码中更新库存时用了item.quantity，但渲染购物车项时显示的是product.qty，如果购物车项存储的是qty而非quantity，会导致库存更新错误，需要统一字段名：

updateDoc(updateCollection,{
    stock: item.stock - item.qty, // 改为item.qty匹配购物车项字段
})

完整修改后的finalizarCompra函数 #

const finalizarCompra = () => {
  const db = getFirestore()
  
  const ventasCollection = collection(db, "ventas");
  addDoc(ventasCollection, {
    items: cart,
    total: totalCompra(),
  }).then((result) => {setIdVenta(result.id)});

  cart.forEach((item) => {
    const updateCollection = doc(db, 'items', item.id)
    updateDoc(updateCollection,{
        stock: item.stock - item.qty,
      })
  });
  
  emptyCart();
}

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