ReactJS实现Firestore不覆盖旧数据，新增用户失物报告

问题描述 #

我正在开发一个功能，允许已登录用户向Firebase Firestore提交失物报告。目前已成功将用户的报告详情写入reports集合，但同一用户提交新报告时，旧报告的详情会被覆盖。我希望新报告能添加到同一集合中，而非覆盖旧数据，类似数组新增元素的效果。

当前实现代码：

await setDoc(doc(db,"reports",auth.currentUser.uid),{ 
      
      description: descref.current.value,
      email: auth.currentUser.email,
      timestamp: serverTimestamp(),
     
    
    }).then(async () =>{
      if (image) {
     
        const storageRef = ref(storage,`images/${ image.name + auth.currentUser.uid }`)
    const uploadTask =  uploadBytesResumable(storageRef,image);
    setimage(null);  
    uploadTask.on(
      'state_changed',
      null,        
      (err) => console.log(err),
      () => {
          // download url
          getDownloadURL(uploadTask.snapshot.ref).then(async (url) => {
              console.log(url);

             //adding the image URL to collection
              await setDoc(doc(db,'reports', auth.currentUser.uid ),{imgurl:url},{merge:true});

期望的数据结构：

{
  "posts": {
    "0": {
      "author": "gracehop",
      "title": "Announcing COBOL, a New Programming Language"
    },
    "1": {
      "author": "alanisawesome",
      "title": "The Turing Machine"
    }
  }
}

解决方案 #

你当前使用setDoc时指定了固定的文档ID（用户UID），所以每次提交都会覆盖该文档的内容。下面提供两种可行的实现方式：

方式1：为每个报告生成独立文档（推荐方案） #

遵循Firestore的设计模式，每个报告对应一个独立文档，由Firestore自动生成随机ID，彻底避免覆盖问题，同时方便后续的查询、分页等操作。

修改后的代码：

// 创建新的报告文档，Firestore自动生成唯一ID
const newReportRef = doc(collection(db, "reports"));
await setDoc(newReportRef, {
  userId: auth.currentUser.uid, // 关联提交报告的用户ID
  description: descref.current.value,
  email: auth.currentUser.email,
  timestamp: serverTimestamp(),
});

if (image) {
  // 用报告文档的ID命名图片，避免同一用户上传同名图片时覆盖
  const storageRef = ref(storage, `images/${image.name + newReportRef.id}`);
  const uploadTask = uploadBytesResumable(storageRef, image);
  setimage(null);
  
  uploadTask.on(
    'state_changed',
    null,        
    (err) => console.log(err),
    async () => {
      const url = await getDownloadURL(uploadTask.snapshot.ref);
      console.log(url);
      // 更新该报告文档的图片URL字段
      await updateDoc(newReportRef, { imgurl: url });
    }
  );
}

后续查询该用户的所有报告时，可以使用：

const userReportsQuery = query(
  collection(db, "reports"),
  where("userId", "==", auth.currentUser.uid)
);

方式2：在用户文档中用数组存储报告（不推荐，数据量大时受限） #

如果一定要在同一个用户文档下存储多份报告，可以用数组结构，通过arrayUnion方法新增报告元素。注意这种方式受限于Firestore单文档1MB的大小限制，不适合报告数量多的场景。

代码示例：

const userReportDoc = doc(db, "reports", auth.currentUser.uid);

// 构造新报告的基础数据
let newReport = {
  description: descref.current.value,
  email: auth.currentUser.email,
  timestamp: serverTimestamp(),
};

// 处理图片上传（若有）
if (image) {
  // 加时间戳确保图片文件名唯一，避免覆盖
  const storageRef = ref(storage, `images/${image.name + auth.currentUser.uid + Date.now()}`);
  const uploadTask = uploadBytesResumable(storageRef, image);
  setimage(null);
  
  // 等待图片上传完成并获取下载URL
  await new Promise((resolve, reject) => {
    uploadTask.on(
      'state_changed',
      null,        
      reject,
      async () => {
        const url = await getDownloadURL(uploadTask.snapshot.ref);
        newReport.imgurl = url;
        resolve();
      }
    );
  });
}

// 将新报告添加到文档的posts数组中（自动创建数组如果不存在）
await updateDoc(userReportDoc, {
  posts: arrayUnion(newReport)
}, { merge: true });

这种方式下，posts字段会是一个数组而非你示例中的对象，但实现了“新增不覆盖”的核心需求。如果一定要用带索引的对象结构，需要手动读取当前文档的索引最大值再新增键值对，这种方式需要处理并发冲突，非常不建议使用。

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