React中如何在Firestore设置文档时不覆盖数组

你的问题出在两个核心点：错误地将数组当作对象扩展，以及使用setDoc时默认会替换整个文档导致原有数据丢失。以下是修正后的实现方案：

方法一：用updateDoc仅更新指定字段 #

const createLabel = async () => {
  // 构造新数组：保留原有labels元素，添加新的label对象
  const newLabels = [...labels, { id: "fifa", cards: [{}] }];
  // 只更新文档中的labels字段，不影响其他数据
  await updateDoc(doc(db, "users", currentUser.uid), {
    labels: newLabels
  });
  // 更新本地state，保持UI与后端数据同步
  setLabels(newLabels);
};

方法二：用setDoc并开启合并模式 #

如果需要兼容文档不存在的场景（自动创建新文档），可以给setDoc添加merge: true选项，确保仅更新指定字段，而非替换整个文档：

const createLabel = async () => {
  const newLabels = [...labels, { id: "fifa", cards: [{}] }];
  await setDoc(doc(db, "users", currentUser.uid), {
    labels: newLabels
  }, { merge: true });
  setLabels(newLabels);
};

问题根源说明 #

1. 原代码中{ ...labels, id: fifa }是把数组当作对象展开，最终得到的是包含数组索引键和id键的对象，而非数组，这直接导致Firestore里的labels结构被破坏，原有内容丢失。
2. 不加merge选项的setDoc会完全替换用户文档，除了新传入的labels字段，文档里其他原有字段（比如用户邮箱、昵称等）都会被清空。

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