Vue.js无法从Cloud Firestore获取products集合数据求助

Hey there, let's get your Firestore data showing up in Vue Devtools and your template properly!

核心问题：生命周期钩子放错位置了 #

你把created这个Vue生命周期钩子函数放到了methods对象里面——Vue只会执行与data、methods同级的生命周期钩子，所以你的数据获取逻辑根本没有被触发，products数组一直是空的，自然在Devtools里看不到内容。

修正后的代码 #

下面是调整后的完整<script>部分，我还优化了几个细节：

import { fb, db } from '../firebase'
export default {
  name: 'Products',
  props: {
    msg: String
  },
  data() {
    return {
      products: [],
      product: {
        name: null,
        price: null
      }
    }
  },
  // ✅ created钩子移到这里，和methods、data同级
  created() {
    // 方式1：一次性获取数据
    db.collection('products').get().then((querySnapshot) => {
      this.products = querySnapshot.docs.map(doc => ({
        id: doc.id, // 带上文档ID，方便后续操作（比如删除/更新）
        ...doc.data()
      }))
    }).catch(err => {
      console.error('获取数据失败:', err)
    })

    // 方式2：实时监听数据变化（推荐，数据更新时自动同步）
    // db.collection('products').onSnapshot((querySnapshot) => {
    //   this.products = querySnapshot.docs.map(doc => ({
    //     id: doc.id,
    //     ...doc.data()
    //   }))
    // })
  },
  methods: {
    saveData() {
      db.collection("products").add(this.product)
        .then((docRef) => {
          console.log("Document written with ID: ", docRef.id);
          this.product.name = "";
          this.product.price = "";
        })
        .catch(function(error) {
          console.error("Error adding document: ", error);
        });
    }
  }
}

同时，调整模板里的v-for的key（用文档ID更可靠）：

<tr v-for="product in products" :key="product.id">
  <td>{{ product.name }}</td>
  <td>{{ product.price }}</td>
</tr>

为什么这样能解决问题？ #

1. 把created移到正确的位置后，Vue会在组件创建时自动执行这个钩子，触发Firestore的数据请求，填充products数组。
2. 加入文档ID不仅让v-for的key更符合Vue的要求，也为后续可能的产品编辑/删除操作提供了唯一标识。
3. 如果用onSnapshot替代get，你的产品列表会实时同步Firestore里的变化，不需要手动刷新页面。

现在打开Vue Devtools，你应该能看到products数组里的12条数据了，模板也会正确渲染产品列表！

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