即使调用了initializeApp，也“没有创建Firebase应用程序‘[DEFAULT]’”

Question

firebase.firestore()我正在尝试将 Firebase (Firestore) 添加到我的 Nuxt 项目中，但是在我的文件中初始化 const 时收到以下错误index.vue：未捕获的 FirebaseError：Firebase：未创建 Firebase 应用程序“[DEFAULT]” - 调用 Firebase App.initializeApp() (app/no-app)。我已在我的项目中安装了 Firebase 以及模块 ( @nuxtjs/firebase)。我的 nuxt.config.js 文件如下所示：export default {...plugins: ['~/plugins/firebase.js'],components: true,buildModules: [    '@nuxt/typescript-build',    '@nuxtjs/tailwindcss',],modules: [],...}我的 firebase.js 文件位于我的插件文件夹中，如下所示：import firebase from 'firebase/app'const config = {    ...}let app = nullif (!firebase.apps.length) {    app = firebase.initializeApp(config)}export default firebase我将上述内容与网上其他示例进行了比较，没有发现任何问题。然而，我对从 Nuxt 到 Firebase 的一切都很陌生，所以我可能会错过一些明显的东西。任何建议表示赞赏。

Answer 1

如果您在单个 Firebase 应用程序上调用initializeApp()多次，通常会发生这种情况。如果您使用单个 Firebase 数据库，请确保在应用启动时对其进行初始化。

Answer 2

firebase.js的这个代码片段应该可以工作：

import fb from "firebase/app"

export const firebase = !fb.apps.length ? fb.initializeApp(firebaseConfig) : fb.app()

// somecomponent.js

import {firebase} from "../firebase.js"

// do your firebase stuff here

尽管此代码片段并非特定于案例，但为了完整性起见，我决定将其包含在内。

---

除了这个线程之外 - 一般来说，通常是在初始化 via 之前调用或多次调用Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).的结果（例如Next.js可能会尝试在后端以及前端初始化它 - 似乎是这种情况在您的代码中）在您的 firebase 应用程序中。firebase..initializeApp();.initializeApp()

因此，作为解决方案，我强烈建议将初始化移动到firebase.js文件，以便在应用程序启动时直接初始化它。

Answer 3

当您在初始化 Firebase 之前尝试访问 Firestore 时，通常会发生这种情况。因此，默认情况下，我们可以检查 firebase 是否已初始化，firebase.apps.length但每次都初始化 firebase 并不是一个好习惯。

因此，如果您只使用 firestore，那么在您的插件中，您可以在初始化后直接导出 firestore，如下所示，

import firebase from 'firebase/app'

const config = {

    ...

}

let app = null

if (!firebase.apps.length) {

    app = firebase.initializeApp(config)

}

export default firebase.firestore()

但由于您使用的是 nuxt，因此有一个名为firebase/nuxt的特殊 nuxt 包

安装后，您可以在模块部分内的 nuxt config 中定义您的配置，如下所示，

modules: [

    [

      '@nuxtjs/firebase',

      {

        config: {

          apiKey: '<apiKey>',

          authDomain: '<authDomain>',

          databaseURL: '<databaseURL>',

          projectId: '<projectId>',

          storageBucket: '<storageBucket>',

          messagingSenderId: '<messagingSenderId>',

          appId: '<appId>',

          measurementId: '<measurementId>'

        },

        services: {

          auth: true // Just as example. Can be any other service.

        }

      }

    ]

  ],

我认为这是在 nuxt.js 中使用 firebase 的更好方法