Vue.js + Firestore 无法读取未定义的属性“集合”答案

【问题标题】：Vue.js + Firestore Cannot read property 'collection' of undefinedVue.js + Firestore 无法读取未定义的属性“集合”
【发布时间】：2020-07-05 10:07:35
【问题描述】：

我最近一直在玩 Vue.js 和 Firestore，我发现了一个很棒的插件可以让我的生活更轻松，虽然它确实需要更少的代码来链接到我的 firestore 数据库，但它一直在让我的生活变得美好undefined 错误非常困难。

我所拥有的很简单：

App.vue：

<template>
  <div id="app">
    <Projects></Projects>
  </div>
</template>

<script>

import Projects from './Projects';
export default {
  name: 'app',

  components: {
    Projects
  },
  data() {
    return {}
  }
}
</script>
<style></style>

Projects.vue：

<template>
  <div id="projects">
    <h1>Hi</h1>
    <p v-for="project in projects" :key="project.project_id">{{ project.title }}</p>
  </div>
</template>

<script>

import db from './main'

export default {
  name: 'projects',
  data() {
    return {
      projects: [],
    }
  },
  firestore: {
    projects: db.collection('projects')
  }
}
</script>
<style></style>

Main.js：

import 'babel-polyfill';
import Vue from 'vue'
import App from './App.vue'

// Firebase Imports
import Firebase from 'firebase/app'
import 'firebase/firestore'
import { firestorePlugin } from 'vuefire'

// Use Plugins
Vue.use(firestorePlugin)

// Initialize Firebase Configuration
var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "xxxxxxxxxxxx"
}

const firebaseApp = Firebase.initializeApp(firebaseConfig)
export const db = firebaseApp.firestore()

new Vue({
  el: '#app',
  render: h => h(App)
})

当我运行此应用程序时，我的控制台中出现以下错误：

Uncaught TypeError: Cannot read property 'collection' of undefined
    at eval (Projects.vue?8816:20)
    at Object.<anonymous> (build.js:1640)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at eval (Projects.vue?eb12:1)
    at Object.<anonymous> (build.js:3128)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at eval (145:1)
    at Object.<anonymous> (build.js:1633)

如果有人有这方面的经验并能解释为什么我在我的代码中是个大笨蛋，那将不胜感激！

【问题讨论】：

不要担心apiKey 和其他配置元素被公开共享：如果您设置了正确的安全规则，这不会构成威胁。请参阅stackoverflow.com/questions/37482366/…
您似乎发布了敏感/私人信息。请重置您的密码和/或撤销 API 密钥和令牌，因为它们在互联网上发布时被视为已泄露。
@SamuelLiew 自从我将其更改为不显示该信息已经有几个星期了

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

【解决方案1】：

所以在玩了一会儿代码之后，我终于修复了它，也摆脱了过程中的其他警告。

更新了 vuefire 初始化：

Vue.use(firestorePlugin)
firebase.initializeApp({
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "xxxxxxxxxxxx"
});

export const db = firebase.firestore()

更新的 Projects.vue：

import { db } from './main'

export default {
  name: 'projects',
  data() {
    return {
      projects: [],
    }
  },
  firestore() {
    return {
      projects: db.collection('projects')
    }
  }
}

这里和那里的小改动最终解决了我的问题，我希望这可以帮助遇到这个问题的其他人:)

【讨论】：