时间戳

首页 > 解决方案 > 为什么这个元素没有从 Firestore 中获取？

javascript - 为什么这个元素没有从 Firestore 中获取？

问题描述

代码：（我 99% 确定问题出在挂载方法中）

  <div class="taskManager">
    <FilterNav @filterChange="current = $event" 
    :current="current"/>
    <div class="tasks">
      <div v-if="tasks.length">
        <div v-for="task in filterTasks" :key="task.id">
          <SingleTask :task="task" @delete="handleDelete"
          @complete="handleComplete"/>
        </div>
      </div>
    </div>
  </div>
  <TasksNavbar/>
  <router-view/>
</template>
<script>
import TasksNavbar from '../components/TasksNavbar.vue'
import SingleTask from '../components/SingleTask.vue'
import FilterNav from '../components/TaskFilterNav.vue'
import Navbar from '../components/Navbar.vue'
import { computed } from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
export default {
  name: 'Home',
  components: { SingleTask, TasksNavbar, FilterNav, Navbar},
  data() {
    return {
      tasks: [],
      current: 'all'
    };
  },
  mounted() {
    var docRef = firebase.firestore().collection('users').doc(firebase.auth().currentUser.uid)
    docRef.get("tasks").then(function(task){
      if(task.exists){
        this.tasks.push(task.data())
      }
    }).catch(function(err){
      console.log(err.message)
    })
  },

文件结构：集合：用户 -> 用户文档，文档名称为用户 ID -> 任务数组作为字段，其中包含任务

任务已正确保存到 Firestore，但未正确获取它们。

标签： javascriptfirebasevue.jsgoogle-cloud-firestore

解决方案

当我写答案时，您编辑了您的问题

docRef.get("tasks").forEach(...)

至

docRef.get("tasks").then(...)

但它不会改变答案的内容。

docRef是 a DocumentReference，它的get()方法是异步的并返回 a DocumentSnapshot。您正在将此方法与（顺便说一句不是异步的）的get()方法混为一谈。DocumentSnapshot

您需要执行以下操作：

var docRef = firebase.firestore().collection('users').doc(firebase.auth().currentUser.uid)

docRef.get().then(doc => {
    if (doc.exists) {
        const tasksArray = doc.get("tasks");
        tasksArray.forEach(...);
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});

另外，在这里解释，你应该注意firebase.auth().currentUser.uid可能会返回null，因为返回的对象 firebase.auth()可能处于中间状态，例如初始化。

您需要确保它firebase.auth().currentUser不为空。

根据您的具体登录流程，您可能需要将代码放在 Vue.jsmounted挂钩中的onAuthStateChanged观察者中：

mounted() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        // Put your code here => user is not null
        var docRef = firebase.firestore().collection('users').doc(user.uid)
    
        docRef.get().then(doc => {...});
        // ....

       }
    });
}

推荐阅读