即使调用了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 = null

if (!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.jsimport {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 = {&nbsp; &nbsp; ...}let app = nullif (!firebase.apps.length) {&nbsp; &nbsp; app = firebase.initializeApp(config)}export default firebase.firestore()但由于您使用的是 nuxt，因此有一个名为firebase/nuxt的特殊 nuxt 包安装后，您可以在模块部分内的 nuxt config 中定义您的配置，如下所示，modules: [&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; '@nuxtjs/firebase',&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; config: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; apiKey: '<apiKey>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; authDomain: '<authDomain>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; databaseURL: '<databaseURL>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; projectId: '<projectId>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; storageBucket: '<storageBucket>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; messagingSenderId: '<messagingSenderId>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; appId: '<appId>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; measurementId: '<measurementId>'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; services: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auth: true // Just as example. Can be any other service.&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; ],我认为这是在 nuxt.js 中使用 firebase 的更好方法