【问题标题】：firebase.firestore() is not a function when trying to initialize Cloud Firestore尝试初始化 Cloud Firestore 时，firebase.firestore() 不是函数
【发布时间】：2021-04-17 04:55:45
【问题描述】：

当我尝试初始化 Firebase Cloud Firestore 时，我遇到了以下错误：

未捕获的类型错误：WEBPACK_IMPORTED_MODULE_0_firebase.firestore 不是函数

我之前用npm install firebase --save 安装了firebase。

import * as firebase from 'firebase';
import router from '../router';

const config = {
        apiKey: "a",
        authDomain: "a",
        databaseURL: "a",
        projectId: "a",
        storageBucket: "a",
        messagingSenderId: "a"
};
if(!firebase.apps.length){
  firebase.initializeApp(config);
  let firestore = firebase.firestore();
}

【问题讨论】：

为什么将 firebase 依赖保存为 dev 依赖？
另外，您需要确保您拥有最新的 4.5.0 版本。检查您的package.json 并确保您设置了正确的版本
我卸载了firebase并使用npm install --save firebase@4.5.0安装了新版本，但它没有改变任何东西：/ @Phil
@eykjs 第二次导入的正确语法是什么？
import 'firebase/firestore' 是正确的语法。

标签： javascript firebase google-cloud-firestore

【解决方案1】：

我通过导入多个库来修复它：firebase 和 firebase/firestore。这是因为firebase 核心库不包含firestore 库。

import firebase from 'firebase/app';
import 'firebase/firestore';

【讨论】：

如果您使用的是 React Native，则会在 Android 上中断。在 iOS 上似乎没问题：-/
这在 2019 年 2 月完美运行。谢谢！ :)
谢谢！第二个导入语句是我所缺少的。
我正在使用 vanilla js 构建一个简单的聊天应用程序，我在 HTML 文件的 head 标记中包含静态 URL 仍然出现此错误，请帮助，提前谢谢

【解决方案2】：

首先，确保您拥有最新版本的 firebase：

npm install firebase@4.12.0 --save

接下来，添加 firebase 和 firestore：

const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");

初始化 firebase 应用：

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();

来源：https://firebase.google.com/docs/firestore/quickstart?authuser=0

【讨论】：

【解决方案3】：

import { firebase } from '@firebase/app';
import '@firebase/firestore'

如果您也使用身份验证

import '@firebase/auth';

【讨论】：

对我来说，我不需要添加该导入行，但身份验证工作正常。为什么它只适用于 Firestore？

【解决方案4】：

希望这对在将 Angular 应用程序部署到 Firestore 时遇到同样问题的人有所帮助。

在 Angular 8 项目中，我在部署到 Firestore 时遇到了同样的错误。我通过添加另一个模块 AngularFirestoreModule 来修复它。

App.module.ts 是这样的：

...
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore'; // << Note AngularFirestoreModule !!!
import { AngularFireDatabaseModule } from '@angular/fire/database';
...

imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
...

package.json:

...
"dependencies": {
    "@angular/animations": "~8.2.2",
    "@angular/common": "~8.2.2",
    "@angular/compiler": "~8.2.2",
    "@angular/core": "~8.2.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.2",
    "@angular/platform-browser": "~8.2.2",
    "@angular/platform-browser-dynamic": "~8.2.2",
    "@angular/router": "~8.2.2",
    "ajv": "^6.10.2",
    "bootstrap-scss": "^4.3.1",
    "core-js": "^2.5.4",
    "firebase": "^6.4.0",
...

更新：当我部署到其他托管服务提供商时，这并没有帮助。对于这种情况，我添加了原始的 firebase 库并且它有效。

import { firestore } from 'firebase';

【讨论】：

谢谢。就我而言，更新（import { firestore } from 'firebase'; ）不是必需的。
男人。我很生气，添加 AngularFirestoreModule 解决了我的问题，哈哈。应用程序在本地没有它的情况下工作，但在 Heroku 上失败了。添加这个是修复......奇怪的是应用程序在几个月前没有它工作。猜猜我所做的更新需要这个。
非常感谢！将 AngularFirestoreModule 添加到导入中节省了一天！

【解决方案5】：

您可以使用凭据在您的应用程序上创建一个单独的组件来初始化 firebase。

firebase-context.js

import * as firebase from 'firebase'
import 'firebase/firestore';

const firebaseConfig = {
            apiKey: "XXXX",
            authDomain: "XXXXX.firebaseapp.com",
            databaseURL: "https://XXXX-app-web.firebaseio.com",
            projectId: "XXXX",
            storageBucket: "XXXX-app-web.appspot.com",
            messagingSenderId: "XXXXXX",
            appId: "1:XXX:web:XXXX",
            measurementId: "G-XXXX"
        };

export default !firebase.apps.length 
  ? firebase.initializeApp(firebaseConfig).firestore()
  : firebase.app().firestore();

如果需要处理数据库操作，不需要每次都调用initialize方法，可以使用之前创建的通用组件方法。

import FirebaseContext from "./firebase-context";

export const getList = () => dispatch => {
    FirebaseContext.collection("Account")
        .get()
        .then(querySnapshot => {
            // success code
        }).catch(err => {
            // error code
        });
}

【讨论】：

【解决方案6】：

如果万一你的代码在巫术之下，import firebase/firestore 不起作用，那么直接包含它：

import '@firebase/firestore/dist/esm/index';

如果不存在，那么：

npm install @firebase/firestore

【讨论】：

当我添加时为我工作： - npm install @firebase/firestore

【解决方案7】：

问题是没有导入firestore

firebase 有很多功能。

您需要从下面的列表中导入或从 CDN 导入您想要实现的内容。

官方参考说要加载firebase-firestore.js。

<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-firestore.js"></script>

如果你想使用 npm，在这里

npm install firebase@7.19.0 --save

网址在这里
https://firebase.google.com/docs/firestore/quickstart?authuser=0#set_up_your_development_environment

【讨论】：

【解决方案8】：

我有同样的错误并尝试关注官方网站但没有工作。然后我用谷歌搜索了错误并登陆了这篇文章。

我试过了：

import * as firebase from 'firebase';
import 'firebase/firestore';

但是，它对我不起作用，但我将 /firebase 添加到第一行 import * as firebase from 'firebase/firebase'; 并且一切正常。

它也适用于require:

const firebase = require("firebase/firebase");
// Required for side-effects
require("firebase/firestore");

【讨论】：

【解决方案9】：

如果您是从早期版本的 firebase 进行更新，并且您对这个问题不以为然，请尝试 const Firebase = require('firebase/firebase') 而不是 require('firebase/app')

【讨论】：

【解决方案10】：

I also struggled with this for a bit. what I did in the end was quite straightforward. 

for versions 9 and higher, just do the following

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 
  authDomain: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
};

// Initialize Firebase

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore;
const auth = firebaseApp.auth();


export { auth };
export default db; 

//cheers

【讨论】：

欢迎来到 Stack Overflow。当代码附有解释时，它会更有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的答案并解释它如何回答所提出的具体问题。见【如何回答】stackoverflow.com/questions/how-to-answer)

【解决方案11】：

如果您使用的是版本 9 的 firebase，那么您需要改用它：

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

这是从版本 8 升级到版本 9 的链接https://firebase.google.com/docs/web/modular-upgrade

【讨论】：

感谢您为我节省了数小时的挫败感 :)

【解决方案12】：

要使用 firestore，您需要在 html 页面顶部添加此链接。

//After initializing firebase, in your main javascript page call...
var data = firebase.firestore();

<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-storage.js"></script>

【讨论】：

第二个脚本是添加firebase存储。 Firestore 不需要它。

【解决方案13】：

就我而言，问题是我不小心在package.json 中添加了firebase-admin 和firebase 包。 firebase-admin 具有优先权，因此即使根据接受的答案添加导入后，我仍然遇到相同的错误。

从客户端应用程序中删除多余的firebase-admin 解决了问题。

请注意，firebase-admin 旨在供服务器端以管理员模式运行，而 firebase 包是客户端库。

【讨论】：

【解决方案14】：

Angular 8 的解决方案（截至 2020 年 1 月 4 日）：

删除package-lock.json文件
运行npm install
import AngularFirestoreModule from @angular/fire/firestore

只需要导入 AngularFirestoreModule。

// App.module.ts

import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule
]

【讨论】：

这个答案可能重复stackoverflow.com/a/57593859/8020389
我提供了专门为 angular 8 latest 工作的解决方案。
这对我有帮助，但您还需要将 AngularFirestoreModule 添加到提供程序
很高兴知道，它有帮助！

【解决方案15】：

如果你和我一样，喜欢打字稿上的所有内容（顺便说一句，这是目的），你可以试试：

import * as firebase from "nativescript-plugin-firebase";
import { User, firestore } from "nativescript-plugin-firebase";

import * as firebaseapp from "nativescript-plugin-firebase/app";

所以你可以做这样的事情：

firebase.getCurrentUser().then((user: User) => { /* something */ });

const mycollection : firestore.CollectionReference = firebaseapp.firestore().collection("mycollection");

【讨论】：

【解决方案16】：

删除node_modules 目录和package-lock.json 然后运行npm install 为我修复了它。

https://github.com/angular/angularfire2/issues/1880

【讨论】：

【解决方案17】：

我以前也有同样的问题，这是一个错误。当我应该从初始化firebase应用程序的.js文件中导入它时，我正在从firebase导入firestore（它是由IDE自动完成的......）。

【讨论】：

【解决方案18】：

我使用的是最新版本的 Angular 8.2.14，当我部署到生产时，它会导致这个问题，所以我在app.module.ts 中添加以下内容

        imports: [
        ...,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFirestoreModule,
        AngularFireDatabaseModule,
...
      ],
      providers: [AngularFirestore, AngularFirestoreModule],

【讨论】：

【解决方案19】：

我找到了a useful comment in Github alclimb

他提到 firebase 分析无法在 Node.js 中工作，因为它意味着要与浏览器一起使用（官方文档中有提及）

【讨论】：

【解决方案20】：

为 Nativescript 启用 Firestore

在插件安装过程中，系统会询问您是否使用 Firestore。

如果您正在升级并且项目根目录中有firebase.nativescript.json 文件，请对其进行编辑并添加："firestore": true。然后运行rm -rf platforms && rm -rf node_modules && npm i。

初始化/初始化应用程序

默认情况下，iOS 和 Android 上的 Firestore 会在本地保存数据以供离线使用（Web 默认情况下不会，常规 Firebase DB 也不会在任何平台上）。如果您不喜欢这个很棒的功能，可以将persist: false 传递给init function。

请注意，initializeApp 只是 init 的别名，以使插件与 Web API 兼容。

const firebase = require("nativescript-plugin-firebase/app");

firebase.initializeApp({
  persist: false
});

收藏

“集合”是任何 Firestore 交互的根源。数据作为“文档”存储在集合中。

 const citiesCollection = firebase.firestore().collection("cities");

来源：nativescript-plugin-firebase

【讨论】：

【解决方案21】：

在客户端的 vanilla javascript 中，您需要包含此脚本才能使其工作：

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>

因为它不包含在默认的 sn-p 中，所以 Google 会要求您复制粘贴到您的网站中。

来源：https://firebase.google.com/docs/firestore/quickstart?authuser=0

【讨论】：

【解决方案22】：

对于 2022 年的读者，请查看您的 firebase 版本。

现在的最新版本是 9.x。它与大多数 YouTube 指南几乎没有什么不同。

您需要firebase@8.x 才能遵循 YouTube 指南。

npm uninstall firebase

npm install firebase@8.x

文档：https://firebase.google.com/docs/firestore/quickstart?authuser=0#web-version-9_1

【讨论】：

【解决方案23】：

从“firebase/firestore”导入 { getFirestore }；

试试这个看看效果如何

【讨论】：

让 db = getFirestore();导出默认数据库；
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案24】：

我想我已经为使用 electron-webpack 的人们提供了它。解决方案来自与导入 codemirror 相关的帖子。 https://github.com/electron-userland/electron-webpack/issues/81

这对我有用。

// package.json
{
  //...
  "electronWebpack": {
    "whiteListedModules": [
      "firebase"
    ]   
  },
  //...
}

【讨论】：

【解决方案25】：

在我的情况下，错误是因为我在实际导入“firebase/firestore”之前尝试导入使用了 firebase.firestore() 的文件

【讨论】：

【解决方案26】：

要在 Node.js 上使用 Firestore 云函数，您应该使用 admin.firestore() 而不是 admin.database()。此外，您应该确保package.json 上的模块firebase-admin 达到5.4.1 或更高版本。看起来像这样：

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "dependencies": {   
    "firebase-admin": "^5.4.1",
    "firebase-functions": "^0.7.0"
  }
}

【讨论】：

问题没有说明这一点，但它是关于客户端网络应用程序，而不是节点服务器应用程序。
如果您考虑使用使用 vue / angular 构建的网络应用程序，我认为您的答案是不正确的。它作为服务器应用程序运行良好

【解决方案27】：

答案只是将这些脚本链接到您的 html 文件中并检查问题是否已解决

script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"

script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js

如果对解决您的问题有帮助，请给予支持

【讨论】：

看来您可能误会了。问题是询问 node.js 问题，因此 html 标签不会有太大帮助。此外，为了提高您的回答质量，请尽量不要要求投票。