Firebase Firestore 在 Vue 中返回一个 Promise

Question

我正在尝试使用来自 Firestore 的一些数据。在它以前工作之前，现在在 Vuetify 中，如果我尝试访问 $data.users，我会一直收到“PENDING”

    export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    db.collection('users').get().then((snapshot) => {
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        this.users = user;
        console.log(user.documents.selfie.url); // Here the log return the value correctly
      });
    });
  },
  methods: {
    imageUrl(user) {
      console.log(user.documents.selfie.url); // Here the log return "Pending";
    },

在模板中我运行v-for (user, index) in users :key='index'

错误：

Uncaught (in promise) TypeError: Cannot read property 'selfie' of undefined

Answer 1

如果不重现您的问题，很难 100% 确定，但我认为问题出在这样一个事实，即当您调用 imageUrl() 方法时，异步 get() 方法返回的 Promise 还不是 fulfilled。这就是您获得 pending 值的原因。

解决这个问题的一种可能性是检查如下：

  methods: {
    imageUrl(user) {
      if (user) {
         console.log(user.documents.selfie.url);
      } else {
         //...
      }
    },

---

另外，您似乎想用来自users 集合的文档填充用户数组。你应该这样做：

  created() {
    db.collection('users').get().then((snapshot) => {
      let usersArray = [];
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        usersArray.push(user);
        console.log(user.documents.selfie.url); // Here the log return the value correctly
      });
      this.users = usersArray;
    });
  },

使用您当前的代码，您分配循环中的最后一个用户，而不是用户列表。