在nuxtJs/ firebase中，“无法读取未定义的属性”应用程序

Question

我已经尝试将firebase与Nuxt Js集成，并且我得到了这个错误。

​

​

根据文档，我首先在"npm安装防火墙“的帮助下安装了防火墙，然后安装了"npm @nuxtjs/ firebase”，第三，我在nuxt.config.js中的模块中集成了防火墙配置。

​

​

那么解决上述错误的解决方案是什么呢？提前感谢

Answer 1

这取决于您使用的@nuxtjs/firebase的哪个版本，因为这个包@nuxtjs/firebase与支持树抖动的防火墙版本9+不兼容。

因此，您需要将包降级为firebase版本8及更早版本。

有关更多信息，请查看作者github问题。

Answer 2

如果您正在使用新的模块化SDK v9.0.1，您可能会得到上面的错误，因为它现在不使用firebase.命名空间，所以尝试使用getApps()而不是firebase.apps。

import { initializeApp, getApps } from "firebase/app" 
import { getFirestore } from "firebase/firestore"
import { getAuth } from "firebase/auth" 
const firebaseConfig = {...} 
if (!getApps().length) {
 //.... 
} 
const app = initializeApp(firebaseConfig) 
const db = getFirestore(app) 
const auth = getAuth(app) export {db, auth}

Answer 3

我把头撞到这个问题上有一段时间了--我试图在动态页面中使用实时数据库，并得到了同样的错误。我终于回到了关于firebase模块回购的这个问题。基本上，我必须做两件事：

1. 使用async asyncData方法，而不是仅仅定义data属性；
2. 同时使用app和params变量。

所以，不是这样的：

export default {
  data: () => ({
    items: []
  )},
  async fetch ({ params }) {
    const ref = this.$fire.database.ref(`foo/${params.slug}`)
    const data = (await ref.once('value')).val()
    this.items = data
  }
}

我不得不这么做：

export default {
  async asyncData ({ app, params }) {
    const ref = app.$fire.database.ref(`foo/${params.slug}`)
    const data = (await ref.once('value')).val()
    return { items: data }
  }
}