如何为Firebase Firestore现有文档内的数组新增元素？

方案1：保留现有数组存储结构的修复方法 #

你遇到的数组首元素被覆盖的问题，核心是arrayUnion的调用方法或者更新逻辑有误，按以下规则修改即可：

• 不要把整个数组传入arrayUnion，只需将要新增的单个团队对象作为参数传入。错误示例：update({teams: arrayUnion([newTeam])})，正确示例：update({teams: arrayUnion(newTeam)})
• 不要使用不带merge: true的set方法做更新，必须用updateDoc方法操作，完整可用的代码参考如下：

import { doc, updateDoc, arrayUnion } from "firebase/firestore";
import { db } from "./你的firebase配置文件路径";

// userUid为当前用户的uid，newTeam为表单提交的新团队数据
const addNewTeam = async (userUid, newTeam) => {
  const userDocRef = doc(db, "你的用户集合名称", userUid);
  await updateDoc(userDocRef, {
    // teams为你存储团队数据的数组字段名
    teams: arrayUnion(newTeam)
  });
};

补充说明：arrayUnion自带去重逻辑，如果两次传入完全相同的团队对象不会重复新增，需要允许重复数据的话，给每个团队对象添加唯一标识字段（比如时间戳生成的teamId）即可。

方案2：更适合多团队场景的子集合方案（推荐） #

如果后续需要对单个团队进行修改、删除、独立查询等操作，数组结构的维护成本会很高，推荐改用子集合存储，完全保留用户uid作为文档ID的设定：

• 存储结构设计：根集合为用户集合，文档ID为用户uid；每个用户文档下新建teams子集合，每个团队作为子集合下的独立文档，文档ID可自动生成也可自定义
• 新增团队的代码参考：

import { collection, addDoc } from "firebase/firestore";
import { db } from "./你的firebase配置文件路径";

const addNewTeam = async (userUid, newTeam) => {
  const teamsColRef = collection(db, "你的用户集合名称", userUid, "teams");
  await addDoc(teamsColRef, newTeam);
};

该方案支持对单个团队的独立操作，无并发写入冲突，扩展性更强。

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