为什么这个元素没有从 Firestore 中获取？ [关闭]答案

【问题标题】：Why is this element not being fetched from firestore? [closed]为什么这个元素没有从 Firestore 中获取？ [关闭]
【发布时间】：2021-01-17 15:36:20
【问题描述】：

代码：（我 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，但未正确获取它们。

【问题讨论】：

“它没有正确获取它们”很难解决。如果您在调试器中逐行执行代码会发生什么？哪条线路没有按照您的预期执行？
@FrankvanPuffelen docRef.get("tasks").forEach(function(task){ if(task.exists){ this.tasks.push(task.data()) } 这些行跨度>

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

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

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

到

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

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

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

您需要执行以下操作：

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);
});

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

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

根据您的具体登录流程，您可能需要将代码放入您的 Vue.js 中的 mounted 钩子中的 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 => {...});
        // ....

       }
    });
}

【讨论】：