Firebase向allProducts数组新增数据不覆盖原有元素的解决方法

需要在不删除allProducts数组内已有商品数据的前提下，向该数组追加新的商品条目，当前编写的代码执行时会直接覆盖数组内已有的商品数据。

• 数据库结构截图：
  
• 现有问题代码截图：
  

现有代码采用直接覆写字段值的更新方式，传入的新数组会完全替换allProducts字段的原有存储内容，没有做新旧数据的合并，也没有使用数据库原生的数组追加能力，因此会丢失历史数据。

根据你使用的数据库类型，选择对应数组追加语法即可，优先使用数据库原生的数组操作符，性能更好且能避免并发写入的数据丢失问题：

Firebase Firestore 场景 #

使用官方提供的arrayUnion操作符实现数组追加，该操作符会自动将新元素追加到数组末尾，不会修改原有元素：

// 引入数组追加操作符
import { arrayUnion, doc, updateDoc } from "firebase/firestore";

const productDocRef = doc(db, "你的集合名称", "目标文档ID");
// 执行追加更新，传入需要新增的商品对象即可，支持一次传多个
await updateDoc(productDocRef, {
  allProducts: arrayUnion(newProduct1, newProduct2)
});

注意：arrayUnion会自动对完全相同的元素去重，如果业务允许数组中存在重复商品，可使用事务做读-合并-写的原子更新。

MongoDB 场景 #

使用$push操作符实现数组追加，支持单条、批量追加：

// 追加单个商品
await db.collection("你的集合名称").updateOne(
  { _id: targetDocId },
  { $push: { allProducts: newProduct } }
);

// 批量追加多个商品
await db.collection("你的集合名称").updateOne(
  { _id: targetDocId },
  { $push: { allProducts: { $each: [newProduct1, newProduct2, newProduct3] } } }
);

通用先读后写方案（需搭配事务） #

如果所用数据库没有提供原生数组追加操作符，必须先读取原有数组、合并新数据后再写回，一定要放在事务中执行，避免并发场景下的数据覆盖：

// 以Firestore事务为例
await runTransaction(db, async (transaction) => {
  const productDoc = await transaction.get(productDocRef);
  if (!productDoc.exists()) throw "文档不存在";
  // 取原有数组，兼容字段为空的情况
  const oldList = productDoc.data().allProducts || [];
  // 合并新旧数据
  const newList = [...oldList, newProduct];
  // 写回更新
  transaction.update(productDocRef, { allProducts: newList });
});

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