TypeError：无法读取未定义的属性（读取“集合”）-Vuejs 和 Firebase

Posted 2023-02-16

【中文标题】TypeError：无法读取未定义的属性（读取“集合”）-Vuejs 和 Firebase

【英文标题】：TypeError: Cannot read properties of undefined (reading 'collection') - Vuejs and Firebase

【发布时间】：2021-11-16 03:38:37

【问题描述】：

我正在尝试开发一个包含任务的日历。我正在尝试使用firebase，但它一直给出一个错误，说它不理解'collection（）'属性。我已经研究了很多东西，试图用其他方式来做，但我什么也没得到。如果我不这样做，我可以注册，但是用“集合”读取数据，不。详情我使用的是第 9 版的 firebase

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'collection')

我不知道还能做什么，有人可以帮帮我吗？整个脚本如下。

脚本

export default 
  data: () => (
    today: new Date().toISOString().substr(0, 10),
    focus: new Date().toISOString().substr(0, 10),
    type: 'month',
    typeToLabel: 
      month: 'Month',
      week: 'Week',
      day: 'Day',
      '4day': '4 Days',
    ,
    name: null,
    details: null,
    start: null,
    end: null,
    color: '#1976D2', // default event color
    currentlyEditing: null,
    selectedEvent: ,
    selectedElement: null,
    selectedOpen: false,
    events: [],
    dialog: false
  ),
  mounted () 
    this.getEvents()
  ,
  computed: 
    title () 
      const  start, end  = this
      if (!start || !end) 
        return ''
      
      const startMonth = this.monthFormatter(start)
      const endMonth = this.monthFormatter(end)
      const suffixMonth = startMonth === endMonth ? '' : endMonth
      const startYear = start.year
      const endYear = end.year
      const suffixYear = startYear === endYear ? '' : endYear
      const startDay = start.day + this.nth(start.day)
      const endDay = end.day + this.nth(end.day)
      switch (this.type) 
        case 'month':
        return `$startMonth $startYear`
        case 'week':
        case '4day':
        return `$startMonth $startDay $startYear - $suffixMonth $endDay $suffixYear`
        case 'day':
        return `$startMonth $startDay $startYear`
      
      return ''
    ,
    monthFormatter () 
      return this.$refs.calendar.getFormatter(
        timeZone: 'UTC', month: 'long',
      )
    
  ,
  methods: 
    async getEvents () 
      let snapshot = await dbStore.collection('calEvent').get()
      const events = []
      snapshot.forEach(doc => 
        let appData = doc.data()
        appData.id = doc.id
        events.push(appData)
      )
      this.events = events
    ,
    setDialogDate(  date ) 
      this.dialogDate = true
      this.focus = date
    ,
    viewDay ( date ) 
      this.focus = date
      this.type = 'day'
    ,
    getEventColor (event) 
      return event.color
    ,
    setToday () 
      this.focus = this.today
    ,
    prev () 
      this.$refs.calendar.prev()
    ,
    next () 
      this.$refs.calendar.next()
    ,
    async addEvent () 
      if (this.name && this.start && this.end) 
        await dbStore.collection('calEvent').add(
          name: this.name,
          details: this.details,
          start: this.start,
          end: this.end,
          color: this.color
        )
        this.getEvents()
        this.name = '',
        this.details = '',
        this.start = '',
        this.end = '',
        this.color = ''
       else 
        alert('You must enter event name, start, and end time')
      
    ,
    editEvent (ev) 
      this.currentlyEditing = ev.id
    ,
    async updateEvent (ev) 
      await dbStore.collection('calEvent').doc(this.currentlyEditing).update(
        details: ev.details
      )
      this.selectedOpen = false
      this.currentlyEditing = null
      this.getEvents()
    ,
    async deleteEvent (ev) 
      await dbStore.collection('calEvent').doc(ev).delete()
      this.selectedOpen = false
      this.getEvents()
    ,
    showEvent ( nativeEvent, event ) 
      const open = () => 
        this.selectedEvent = event
        this.selectedElement = nativeEvent.target
        setTimeout(() => this.selectedOpen = true, 10)
      
      if (this.selectedOpen) 
        this.selectedOpen = false
        setTimeout(open, 10)
       else 
        open()
      
      nativeEvent.stopPropagation()
    ,
    updateRange ( start, end ) 
      this.start = start
      this.end = end
    ,
    nth (d) 
      return d > 3 && d < 21
      ? 'th'
      : ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
    
  

主要

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

// Firebase
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

//I have initialized my project with valid values but commented the keys to avoid publishing them online.
firebase.initializeApp(
  apiKey: "<my_api_key>", 
  authDomain: "<my_project_domain>",
  projectId: "<my_project_id>",
  databaseURL: "",
  storageBucket: "<my_project_storage_bucket>",
  messagingSenderId: "<my_messaging_sender_id>",
  appId: "<my_app_id>",
  measurementId: "<my_measurement_id>"
);

Vue.config.productionTip = false

new Vue(
  router,
  vuetify,
  render: h => h(App)
).$mount('#app')


export const dbStore = firebase.firestore();

【问题讨论】：

我看不到您在脚本文件中导入dbStore。可以分享一下导入语句吗？

当您调用this.getEvents() 时，不能保证dbStore 是具有您期望的方法的水合对象。

【参考方案1】：

检查您是否正在导入 DbStore

使用

this.dbStore.collection('calEvent').get().then((res)=> 

    const events = res.docs;

) 

【参考方案2】：

您可能未正确绑定数据，因此您需要排查问题出在后端还是前端。看来你在做网站结构之前可能没有正确获取数据，你需要正确获取所有数据和数据库，然后才能开始构建并将其绑定到前端。

我会首先尝试使用模拟数据，例如，返回一个 json 并验证应用程序是否正在接收它或者网络请求是否得到响应，如果响应是 200，然后验证应用程序是如何接收的

<pre> yourObject </pre>

如果不为空，则尝试使用真实数据。如果它也不为空，则您的数据已正确绑定。

您还可以在脚本中硬编码一些数据，以查看问题是否来自前端，如下所示：

data: () => (
    today: 14/02/2021
    focus: 14/01/2021
    type: 'month',
  ),

您也可以尝试使用 Vuefire 绑定数据，这将帮助您以更好的方式将 Firebase 合并到 VueJS。您可以关注这个非常有用的guide，了解如何使用 Vuefire 绑定来自 Firestore 的数据。 要开始使用，只需在您的页面中包含 Vue、Firebase 和 VueFire 库：

<head>
  <!-- Vue -->
  <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <!-- Firebase -->
  <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
  <!-- VueFire -->
  <script src="https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js"></script>
</head>

VueFire 将自动检测 Vue 的存在并自行安装。如果您使用的是模块捆绑器，您还可以通过 NPM 安装依赖项：

npm install vue firebase vuefire --save

var Vue = require("vue");
var VueFire = require("vuefire");
var Firebase = require("firebase");

// explicit installation is required in a module environment
Vue.use(VueFire);