Firebase如何向Firestore已有数组追加新数组不覆盖原数据

开发用户上传图片功能时，需要更新Firebase Firestore数据库：保留原有images数组的全部内容，同时将新生成的图片信息追加到该数组中。原有实现代码会直接覆盖文档内容，无法满足追加需求，原代码如下：

getDownloadURL(upload.snapshot.ref).then(async (url) => {
  setDoc(doc(firestore, 'images', uid), {
    images: [
      [{
          userId: uid,
          image: url,
          description: description,
          tags: selectedTags
      }]
    ]
  })
})

• 原生setDoc方法默认会全量覆盖目标文档的所有字段，原有images数组的内容会被直接清空
• 新写入的图片对象额外嵌套了两层数组，就算不覆盖内容，最终存储的也是二维嵌套结构，后续读取解析会出错
• 没有使用Firestore提供的数组专用操作符，手动写入拼接逻辑容易在并发场景下出现数据丢失

方案1：原子操作追加（推荐，并发安全） #

使用Firestore内置的arrayUnion操作符做原子更新，不需要提前读取文档内容，自动处理追加逻辑，天然避免并发写入冲突，同时支持文档不存在时自动初始化。
首先引入依赖方法：

import { doc, setDoc, arrayUnion } from "firebase/firestore";

修改上传后的写入逻辑：

getDownloadURL(upload.snapshot.ref).then(async (url) => {
  const userImageDocRef = doc(firestore, 'images', uid);
  // 构造单条图片数据，不要额外套数组层
  const newImageData = {
    userId: uid,
    image: url,
    description: description,
    tags: selectedTags
  };
  // 带merge配置写入，不存在的文档会自动创建，已存在的文档只会更新指定字段
  await setDoc(userImageDocRef, {
    images: arrayUnion(newImageData)
  }, { merge: true })
})

注意：arrayUnion会自动对数组元素做去重，如果完全相同的图片对象重复提交，不会重复插入。如果业务需要允许重复存储相同图片信息，使用方案2。

方案2：读文档拼接写入（支持重复元素） #

如果需要允许完全一致的图片信息重复存入数组，可以先读取现有文档的数组内容，拼接新数据后再写回：

// 先引入getDoc依赖
import { doc, setDoc, getDoc } from "firebase/firestore";

getDownloadURL(upload.snapshot.ref).then(async (url) => {
  const userImageDocRef = doc(firestore, 'images', uid);
  const docSnapshot = await getDoc(userImageDocRef);
  // 读取原有数组，文档不存在或images字段为空时初始化为空数组
  const existedImages = docSnapshot.exists() ? (docSnapshot.data().images || []) : [];
  const newImageData = {
    userId: uid,
    image: url,
    description: description,
    tags: selectedTags
  };
  await setDoc(userImageDocRef, {
    images: [...existedImages, newImageData]
  }, { merge: true })
})

• 所有写入操作必须加{ merge: true }配置，否则会清空文档内除images外的其他业务字段
• 构造单条图片数据时不要额外包裹[]，否则会生成嵌套数组，后续遍历渲染会出问题
• 高并发上传场景优先选方案1，方案2是先读后写逻辑，并发提交时存在旧数据覆盖新数据的风险

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