React Native Firebase 子集合写入问题排查与最佳实践

本文详解 react native 中使用 firebase 创建订单子集合时数据丢失的常见原因，重点解决因混用 `await` 和 `.then()` 导致的异步执行异常，并提供健壮、可复用的子集合批量写入方案。

在 React Native 项目中集成 Firebase 并操作 Firestore 子集合（如为 Orders/{orderId}/Products 添加多个商品）时，开发者常遇到「只写入一条记录」的问题——尽管 cartProducts 包含多个商品，但最终子集合中仅出现一项。该问题在 Expo 环境下可能表现正常，却在原生 React Native（尤其是较旧版本或特定 Metro 配置下）中频繁复现，其根本原因往往并非 Firebase SDK 兼容性缺陷，而是异步控制流误用。

最典型的错误模式出现在原始代码中：

await addDoc(ordrRef, { ... }).then((doc) => {
  orderID = doc.id; // ⚠️ 在 then 回调中赋值，但外部 await 已结束
});

此处混合使用 await（用于等待 addDoc）与 .then()（用于提取 doc.id），导致 orderID 的赋值发生在异步回调中，而后续循环可能在 orderID 尚未定义或为空字符串时就已执行，进而使所有子文档被写入到 Orders//Products（空 ID 路径），甚至因路径非法而静默失败。

✅ 正确做法是统一使用 async/await 风格，确保变量赋值与后续逻辑严格按序执行：

const placeOrder = async () => {
  try {
    // 1. 创建主订单文档，获取 orderId
    const orderDoc = await firestore()
      .collection('Orders')
      .add({
        totalPrice: route?.params?.orderPrice,
        userId: loggedUser,
        createdAt: firestore.FieldValue.serverTimestamp(),
      });

    const orderId = orderDoc.id;
    console.log('Order created with ID:', orderId);

    // 2. 遍历购物车，逐条写入 Products 子集合
    for (const key in cartProducts) {
      if (Object.prototype.hasOwnProperty.call(cartProducts, key)) {
        const product = cartProducts[key];
        const subDoc = await firestore()
          .collection('Orders')
          .doc(orderId)
          .collection('Products')
          .add({
            productTitle: product.title,
            productImage: Array.isArray(product.image) ? product.image[0] : product.image,
            productQuantity: product.quantity || 1,
            productPrice: product.price,
            productOfferPrice: product.offerPrice,
          });
        console.log('Product added to subcollection:', subDoc.id);
      }
    }

    // 3. 可选：清空本地购物车
    dispatch(cartActions.clearCart());

    console.log('Order placed successfully with', Object.keys(cartProducts).length, 'products.');
  } catch (error) {
    console.error('Failed to place order:', error);
    Alert.alert('下单失败', error.message || '请检查网络连接');
  }
};

? 关键注意事项：

• 避免 for...in 遍历非数组对象风险：若 cartProducts 是普通对象（而非数组），请确保使用 Object.keys(cartProducts) 或更推荐的 Object.entries(cartProducts) 进行安全迭代；
• 添加空值防护：对 product.image[0] 等嵌套访问增加存在性判断，防止运行时错误；
• 错误处理不可省略：Firebase 写入可能因权限、网络或规则限制失败，务必包裹 try/catch 并向用户反馈；
• 性能优化建议：若商品数量较多（>10），可考虑改用 writeBatch() 批量写入，显著提升性能并保证原子性；
• 状态同步：成功提交后及时更新 Redux 或 Context 中的购物车状态，避免 UI 滞后。

综上，子集合写入失败多源于异步流程失控，而非平台差异。坚持纯 async/await 编程范式、强化类型与边界校验、配合完善的错误日志，即可在 React Native 中稳定实现多层级 Firestore 数据写入。