如何在JavaScript中将Firestore数据追加至数组以展示帖子？

嘿，我看你现在遇到的问题是没法把Firebase集合里的帖子数据正确存入posts数组对吧？咱们先来看看你代码里的核心问题：

你当前循环里写了this.posts = doc.data();，这会导致每次遍历文档时，都用单个帖子的数据覆盖整个posts数组，最后数组里只会剩下最后一个文档的数据，这肯定不是你想要的效果。

下面是修正后的代码，我会一步步给你解释逻辑：

import * as firebase from "firebase/app";
import db from "@/plugins/firebase";

export default {
  data() {
    return {
      posts: []
    };
  },
  methods: {
    getPosts() { // 我把方法名改成了更语义化的getPosts，你也可以保留原来的get
      db.collection("posts")
        .get()
        .then(snapshot => {
          // 先创建临时数组，避免多次修改响应式数据（效率更高）
          const fetchedPosts = [];
          snapshot.forEach(doc => {
            // 把Firebase文档的ID和数据合并在一起
            // 文档ID后续做编辑、删除操作时非常有用
            const postData = {
              id: doc.id,
              ...doc.data() // 展开文档里的所有字段
            };
            fetchedPosts.push(postData); // 把单个帖子数据添加到临时数组
          });
          // 一次性把所有帖子数据赋值给响应式的posts数组
          this.posts = fetchedPosts;
          console.log("所有帖子数据：", this.posts);
        })
        .catch(err => {
          console.log("获取文档出错：", err);
        });
    }
  },
  // 如果你希望页面加载时自动获取数据，可以在mounted钩子调用方法
  mounted() {
    this.getPosts();
  }
};

关键修正点说明： #

• 避免数组覆盖：用push方法把单个帖子数据添加到临时数组，而不是直接赋值给this.posts，这样就能保留所有帖子的数据
• 保留文档ID：Firebase的doc.data()不会返回文档ID，手动把doc.id合并到数据里，后续对单个帖子做编辑、删除操作时必须用到这个ID
• 高效更新响应式数据：先收集所有数据到临时数组，再一次性赋值给this.posts，减少Vue响应式系统的触发次数，性能更优

额外优化：实时监听数据变化 #

如果你希望页面能自动同步Firebase里的最新帖子（比如有人新增/修改帖子时，页面自动更新），可以把get()换成onSnapshot()方法，代码如下：

getPosts() {
  db.collection("posts")
    .onSnapshot(snapshot => {
      const fetchedPosts = [];
      snapshot.forEach(doc => {
        fetchedPosts.push({
          id: doc.id,
          ...doc.data()
        });
      });
      this.posts = fetchedPosts;
    }, err => {
      console.log("监听文档出错：", err);
    });
}

这样只要posts集合里的数据有变化，你的页面就会自动更新，不需要手动调用获取方法。

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