Javascript '；没有Firebase应用程序'；[默认]'；已创建'；即使调用initializeApp

我正在尝试将Firebase（Firestore）添加到我的Nuxt项目中，但是在我的

index.vue

文件中从

Firebase.Firestore（）

初始化常量时收到以下错误：

未捕获的Firebase错误：Firebase:未安装Firebase应用程序“[默认]” 已创建-调用Firebase App.initializeApp（）（应用程序/无应用程序）

我已经在我的项目和模块中安装了Firebase（

@nuxtjs/Firebase

）

我的nuxt.config.js文件如下所示：

export default {

...

plugins: ['~/plugins/firebase.js'],

components: true,

buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
],

modules: [],

...

}

我的firebase.js文件位于我的plugins文件夹中，如下所示：

import firebase from 'firebase/app'

const config = {
    ...
}

let app = null
if (!firebase.apps.length) {
    app = firebase.initializeApp(config)
}

export default firebase

---

我已经将上面的例子与网上的其他例子进行了比较，没有发现任何问题。然而，从Nuxt到Firebase，我都是新手，所以我可能遗漏了一些明显的东西。非常感谢您的建议。

如果您在单个firebase应用程序上多次调用

initializeApp（）

，通常会发生这种情况。如果您使用的是单个firebase db，请确保在应用程序启动时对其进行初始化。

根据此说明，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

归功于；尽管这段代码不区分大小写，但为了完整起见，我决定将其包含在内

---

除此线程外-一般来说，

未捕获的Firebase错误：Firebase:未创建Firebase应用程序“[默认]”-调用Firebase应用程序。initializeApp（）（应用程序/无应用程序）。

通常是调用

Firebase的结果。

在通过

初始化之前。

或在firebase应用程序中多次调用

.initializeApp（）

（例如Next.js可能会尝试在后端以及前端对其进行初始化，这在您的代码中似乎是如此）

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

---

出于进一步阅读的目的：

---

在初始化firebase之前尝试访问firestore时，通常会发生这种情况。因此，默认情况下，我们可以通过

firebase.apps.length

检查firebase是否已初始化，但每次初始化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，所以有一个特殊的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.
        }
      }
    ]
  ],

模块：[
[
“@nuxtjs/firebase”，
{
配置：{
apiKey:“”，
身份验证域：“”，
数据库URL:“”，
projectId:“”，
storageBucket:“”，
messagingSenderId:“”，
appId:“”，
度量值ID:“”
},
服务：{
auth:true//正如示例所示。可以是任何其他服务。
}
}
]
],

---

我认为在nuxt.js中使用firebase是一种更好的方法，但我看了那篇文章，但是我不明白为什么在

app=firebase.initializeApp（配置）之前调用我的store/index.js文件中的
const-firestore=firebase.firestore（）

它在我的

numxt.config.js

文件中被引用为

插件：['~/plugins/firebase.js']

。你能解释一下为什么会出现这种情况吗？如果我将初始化代码移到

firebase.js

文件中，它会工作，错误也会消失，但我应该能够将此代码作为插件引用，不是吗？我不使用此堆栈，但可能它与