Nuxt.js访问Firebase Realtime Database报database未定义如何解决

你使用的@nuxtjs/firebase模块会将所有初始化完成的Firebase服务挂载到全局的$fire实例下，而非$firebase实例，代码中引用路径写错导致读取不到database属性。

1. 解决报错 #

将getDb方法中的this.$firebase.database.ref('test')改为this.$fire.database.ref('test')即可消除当前的类型错误。

2. 完整实现test数组读取与页面渲染 #

// 页面script部分逻辑
export default {
  data() {
    return {
      // 存储从数据库读取的test数组
      testList: []
    }
  },
  mounted () {
    this.getDb()
  },
  methods: {
    async getDb () {
      const testRef = this.$fire.database.ref('test')
      try {
        const snapshot = await testRef.once('value')
        const res = snapshot.val()
        // 将数据库返回的对象结构转为数组，方便前端渲染
        this.testList = res ? Object.values(res) : []
      } catch (e) {
        console.error('读取数据库失败：', e)
      }
    }
  }
}

<!-- 页面template部分渲染示例 -->
<template>
  <div>
    <h2>Test数据列表</h2>
    <ul v-if="testList.length">
      <li v-for="(item, index) in testList" :key="index">
        <!-- 根据你实际的字段名调整展示内容 -->
        内容：{{ item.message }}
      </li>
    </ul>
    <p v-else>暂无数据</p>
  </div>
</template>

调试阶段如果出现权限报错，可以临时将Realtime Database的权限规则调整为允许读取：

{
  "rules": {
    "test": {
      ".read": true,
      ".write": false
    }
  }
}

生产环境请结合业务逻辑配置对应的权限校验规则，不要长期使用公开可读的配置。

内容的提问来源于stack exchange，提问作者Joaquin684