firebase.firestore() 在尝试初始化 Cloud Firestore 时不是函数

Question

当我尝试初始化 Firebase Cloud Firestore 时，我运行出现以下错误：

Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is not a function

我之前用 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();
}

Answer 1

要在 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"
  }
}

Answer 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

Answer 3

如果碰巧你的代码在巫术下，import firebase/firestore 无法运行，那么直接包含它：

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

如果不存在，则：

npm install @firebase/firestore

Answer 4

我想我已经为使用 electron-webpack 的人准备好了。解决方案来自与导入代码镜像相关的 post。 https://github.com/electron-userland/electron-webpack/issues/81

这对我有用。

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

Answer 5

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

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

Answer 6

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

如果您也使用身份验证

import '@firebase/auth';

Answer 7

我遇到了同样的错误并尝试关注官方网站但没有成功。然后我用谷歌搜索错误并找到了这个 post.

我试过了：

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");

Answer 8

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

Answer 9

如果你像我一样喜欢用打字稿打字（顺便说一下，这就是目的），你可以试试：

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");

Answer 10

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

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

Answer 11

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

在Angular8项目中，部署到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';

Answer 12

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

//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>

Answer 13

在我的例子中，问题是我不小心在 package.json 中添加了 firebase-admin 和 firebase 包。并且 firebase-admin 优先，所以即使在根据接受的答案添加导入之后，我仍然遇到同样的错误。

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

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

Answer 14

Angular8 的解决方案（截至 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
]

Answer 15

我以前也遇到过同样的问题，是bug。我从 firebase 导入 firestore（它由 IDE... 自动完成），而我应该从我初始化 firebase 应用程序的 .js 文件导入它。

Answer 16

我使用的是最新版本的Angular 8.2.14，当我部署到生产环境时，出现了这个问题，所以我在app.module.ts

中添加了以下内容

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

Answer 17

我通过 alclimb

找到了 a useful comment in Github

他提到 firebase 分析在 Node.js 中不起作用，因为它意味着要与浏览器一起使用（官方文档中提到了这一点）

Answer 18

您可以使用凭据在您的应用程序上创建一个单独的组件来初始化 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();

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

import FirebaseContext from "./firebase-context";

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

Answer 19

为 Nativescript 启用 Firestore

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

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

init / initializeApp

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

Note that initializeApp is simply an alias for init to make the plugin compatible with the web API.

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

firebase.initializeApp({
  persist: false
});

合集

A 'collection' 是任何 Firestore 交互的根。数据在集合中存储为 'document'。

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

来源：nativescript-plugin-firebase

Answer 20

问题是没有导入 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

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

Answer 21

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

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

因为它不包含在默认代码段中 Google 要求您复制粘贴到您的网站中。

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

Answer 22

简单的答案就是 link 您 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

如果对解决您的问题有帮助，请点赞

Answer 23

就我而言，错误是因为我在实际导入“firebase/firestore”

之前尝试导入使用 firebase.firestore() 的文件

Answer 24

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

Answer 25

如果您使用的是 firebase 版本 9，则需要改用此版本：

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

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

Answer 26

对于 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

Answer 27

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

试试看效果如何

firebase.firestore() 在尝试初始化 Cloud Firestore 时不是函数

firebase.firestore() is not a function when trying to initialize Cloud Firestore

javascript

firebase

google-cloud-firestore

为 Nativescript 启用 Firestore

init / initializeApp

合集