尝试初始化Cloud Firestore时，firebase.firestore（）不是一个函数

时间：2017-10-08 21:27:15

标签： javascript firebase google-cloud-firestore

当我尝试初始化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();
}

24 个答案:

答案 0 :(得分：40)

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

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

答案 1 :(得分：11)

首先，请确保您拥有最新版本的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

答案 2 :(得分：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,
...

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';

答案 3 :(得分：4)

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

答案 4 :(得分：3)

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

如果您还使用身份验证

import '@firebase/auth';

答案 5 :(得分：1)

如果有任何机会，您的代码处于巫术之下，并且import firebase/firestore无法正常工作，请直接加入：

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

如果不存在，那么：

npm install @firebase/firestore

答案 6 :(得分：1)

我遇到了同样的错误，并尝试访问官方网站，但没有成功。 然后我用错误搜索了谷歌，并进入了这篇文章。

我尝试过：

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

答案 7 :(得分：1)

问题不是导入Firestore

firebase具有许多功能。

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

enter image description here 官方参考说要加载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

答案 8 :(得分：1)

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

  1. 删除package-lock.json文件
  2. 运行npm install
  3. 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
]

答案 9 :(得分：0)

在我的情况下，问题是我在firebase-admin中意外添加了firebase和package.json软件包。并且firebase-admin处于优先地位，因此即使按照已接受的答案添加了导入，我仍然遇到相同的错误。

从客户端应用中删除多余的firebase-admin可以解决此问题。

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

答案 10 :(得分：0)

在客户端的 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

答案 11 :(得分：0)

为本地脚本启用Firestore

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

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

初始化/ initializeApp

默认情况下，iOS和Android上的Firestore在本地保留数据以供脱机使用（默认情况下，Web不存在，并且常规Firebase DB不在任何平台上）。如果您不喜欢该功能，可以将persist: false传递给init function。

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

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

firebase.initializeApp({
  persist: false
});

收藏

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

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

来源：nativescript-plugin-firebase

答案 12 :(得分：0)

我通过alclimb找到了a useful comment in Github

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

答案 13 :(得分：0)

添加此脚本

您可以阅读有关官方文档的更多信息

https://firebase.google.com/docs/firestore/quickstart#set_up_your_development_environment

答案 14 :(得分：0)

我使用的是最新版本的Angular 8.2.14，当我将其部署到生产环境中时，会导致此问题，因此我将以下内容添加到app.module.ts 

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

答案 15 :(得分：0)

我曾经遇到过同样的问题，那是一个错误。当我应该从初始化Firebase应用程序的.js文件中导入Firestore时，我正在从Firebase导入Firestore（它是由IDE自动完成的）。

答案 16 :(得分：0)

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

function getIdenticalCount(str1, str2) {
  let count = 0;
  
  for (let ch of str1) {
    if (str2.includes(ch)) {
      count++;
    }
  }
  
  return count;
}

console.log(getIdenticalCount("apple", "bat"));
console.log(getIdenticalCount("cat", "dog"));
console.log(getIdenticalCount("apple", "pineapple"));
//After initializing firebase, in your main javascript page call...
var data = firebase.firestore();

答案 17 :(得分：0)

与node_modules一起删除package-lock.json目录，然后运行npm install为我修复了该问题。

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

答案 18 :(得分：0)

如果您像我一样喜欢打字稿上键入的所有内容（顺便说一句，这就是目的），您可以尝试：

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

答案 19 :(得分：0)

如果您是从较早版本的Firebase更新，并且正在解决此问题，请尝试 const Firebase = require('firebase/firebase')代替require('firebase/app')

答案 20 :(得分：0)

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

这对我有用。

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

答案 21 :(得分：-1)

要在Node.js上使用admin.firestore()云功能，您应该使用admin.database()而不是firebase-admin。另外，您应该确保package.json上的模块5.4.1最高为{ "name": "functions", "description": "Cloud Functions for Firebase", "dependencies": { "firebase-admin": "^5.4.1", "firebase-functions": "^0.7.0" } } 或更高。看起来像：

     from sys import stdin, stdout
     n = [int(x) for x in stdin.readline().rstrip().split()]
     l = 5**n
     res = str(l)
     stdout.write(res(2)+res(1))

答案 22 :(得分：-1)

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

答案 23 :(得分：-2)

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

脚本 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

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

相关问题
最新问题