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

Question

当我尝试初始化Firebase Cloud Firestore时,遇到以下错误:

未捕获的TypeError: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();
}

Answer 1

我通过导入多个库来修复它:firebase和firebase/firestore.那是因为firebase核心库本身不包含firestore库.所以修复它的完整代码是:

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

Answer 2

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

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

请记住：compat 库是一个临时解决方案，将在未来的主要 SDK 版本（例如版本 10 或版本 11）中完全删除。您的最终目标是删除兼容代码并在应用程序中仅保留版本 9 模块化样式代码。

目前，您可以使用 compat 库，但将来您应该尝试从 compat 切换到模块化。

Answer 3

首先,确保你有最新版本的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 4

我也为此苦苦挣扎了一段时间。我最终所做的事情非常简单。

对于版本 9 及更高版本，只需执行以下操作

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 5

希望这对在将 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,
...

包.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 6

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

如果您也在使用身份验证

import '@firebase/auth';

Answer 7

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