React.js中用map数据更新Firestore Map字段时数据被覆盖的解决方法

你当前的代码在循环中每次调用updateDoc时，都将CartItems字段整个替换为只包含当前商品的新对象。即使设置了{ merge: true }，也只能合并顶层字段，无法实现嵌套对象的键值对累加，最终只会保留最后一次循环的商品数据。

有两种可行的修复方式，根据你的需求选择：

方式一：一次性合并所有商品后更新 #

先将购物车所有商品整合成一个完整的CartItems对象，再调用一次updateDoc完成更新。这种方式适合替换整个购物车列表，或确保原有CartItems数据需要被完全覆盖的场景：

// 把所有购物车商品整合为一个Map对象
const cartItemsMap = cartItems.reduce((result, item) => {
  result[item.productName] = item.imgUrl[0];
  return result;
}, {});

// 一次性更新到Firestore
updateDoc(docRef, {
  CartItems: cartItemsMap
}, { merge: true });

方式二：逐个更新嵌套字段 #

如果需要保留原有CartItems中的数据，同时添加新商品，直接通过点符号路径更新嵌套字段即可。这种方式会在原有CartItems对象上追加新的键值对，不会覆盖已有数据：

// 用Promise.all确保所有更新操作完成
await Promise.all(
  cartItems.map((item) =>
    updateDoc(docRef, {
      // 直接指定嵌套字段路径
      [`CartItems.${item.productName}`]: item.imgUrl[0]
    })
  )
);

注意：updateDoc默认就是合并更新，无需额外设置{ merge: true }。

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