Firestore技术问题：如何将图片对象存入数组并用于UI展示

我能通过对象获取图片的URL、caption和ID，但需要把这些数据存入Firestore的数组字段中，方便后续读取并在UI展示图片。试过将类对象与数组合并、向数组push对象、用普通对象替代类对象等方法，都没解决问题。

相关代码如下：

class App {
  constructor() {
    this.posts = [];
    this.post = {
      id: cuid(),
      caption: "",
      image: "",
    };
}

 getFileUrl(name) {
    const imageRef = storage.ref(name);
    imageRef
      .getDownloadURL()
      .then((url) => {
        this.post.image = url;
        console.log(this.post.image);
        this.savePosts();
        this.render();
      })
      .catch((error) => {
        console.log(error, "Error Occured");
      });
  }

  savePosts() {
    db.collection("users")
      .doc(this.userId)
      .set({
        post: this.posts,
      })
      .then(() => {
        console.log("Document successfully written!");
      })
      .catch((error) => {
        console.error("Error writing document: ", error);
      });
  }

  render() {
    this.savePosts();
  }

问题分析与解决方案 #

你的代码核心问题是没有把填充好的post对象添加到posts数组里，而且复用了同一个this.post对象，即使push也会导致数组内容重复或被覆盖。以下是修正后的代码和说明：

修正后的代码 #

class App {
  constructor() {
    this.posts = [];
    this.userId = "你的用户ID"; // 确保这里已正确赋值
  }

  // 每次创建新的post对象，避免复用导致的引用问题
  createNewPost(caption = "") {
    return {
      id: cuid(),
      caption: caption,
      image: "",
    };
  }

  getFileUrl(name, caption) {
    const imageRef = storage.ref(name);
    // 创建新的post实例
    const newPost = this.createNewPost(caption);
    
    imageRef
      .getDownloadURL()
      .then((url) => {
        newPost.image = url;
        // 将填充好的post添加到数组
        this.posts.push(newPost);
        this.savePosts();
      })
      .catch((error) => {
        console.log(error, "Error Occured");
      });
  }

  savePosts() {
    db.collection("users")
      .doc(this.userId)
      // 使用merge: true，避免覆盖用户文档的其他字段
      .set({
        posts: this.posts,
      }, { merge: true })
      .then(() => {
        console.log("Document successfully written!");
      })
      .catch((error) => {
        console.error("Error writing document: ", error);
      });
  }
}

关键修改点 #

1. 新增创建post的方法：createNewPost每次生成新的对象，避免复用同一个this.post导致数组内的元素都是同一引用，后续修改会影响所有数组项。
2. 将post添加到数组：在获取到图片URL后，把填充完成的newPostpush到this.posts数组，再调用savePosts。
3. 添加merge选项：set方法加上{ merge: true }，这样只会更新posts字段，不会覆盖用户文档里的其他数据（比如用户名、邮箱等）。
4. 移除冗余的render方法：原render只是重复调用savePosts，直接在getFileUrl里调用即可。

注意事项 #

• 确保this.userId已正确赋值为当前用户的ID，否则无法找到对应的Firestore文档。
• 如果需要支持编辑现有post，可以在数组中找到对应ID的对象进行修改，再重新保存数组。

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