无法在下一个 js 上读取 firebase 中未定义的属性“长度”答案

【问题标题】：Cannot read property 'length' of undefined in firebase on next js无法在下一个 js 上读取 firebase 中未定义的属性“长度”
【发布时间】：2021-12-09 13:34:43
【问题描述】：

我在下一个 js 中使用 firebase，但它给出了一个错误消息

TypeError：无法读取未定义的属性“长度” 无论如何我可以解决这个错误。

这是我的 Firebase 配置文件

import * as firebase from "firebase/app";
import 'firebase/firestore'
const firebaseConfig = {
  apiKey: "AIzaSyD0Kz7iRs6WKSXO6Iw2hEeDFeRcDGERmV8",
  authDomain: "facebook-clone-1870b.firebaseapp.com",
  projectId: "facebook-clone-1870b",
  storageBucket: "facebook-clone-1870b.appspot.com",
  messagingSenderId: "924586129038",
  appId: "1:924586129038:web:1d4204813a4956bd353bdf"
};

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

const db = app.firestore();
const storage = firebase.storage();

export  {db,storage};

这是错误信息

.next\server\pages\index.js (12:13) @ Object../firebasec.js

  10 | };
  11 | 
> 12 | const app = !firebase.apps.length
     |             ^
  13 |     ? firebase.initializeApp(firebaseConfig)
  14 |     : firebase.app();

Package.json 文件

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.4",
    "firebase": "^9.1.3",
    "next": "11.1.2",
    "next-auth": "^3.29.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.17"
  }
}

【问题讨论】：

package.json 上的 Firebase 版本是什么？
firebase 版本是 9.1.3

标签： javascript firebase next.js

【解决方案1】：

您的代码似乎有 firebase v8 而您有 firebase v9 包，并且它具有完全不同的导入结构。当您使用 v8 遵循一些教程并安装 firebase 时会发生这种情况很多，因此默认情况下它会获得最新版本，即 v9

你应该怎么做：

1- 删除当前版本

npm rm firebase

2- 安装最新的 8.x

npm install firebase@8.9

【讨论】：

@Jeevan 不客气，接受并投票会很好