尝试初始化 Cloud Firestore 时，firebase.firestore() 不是函数
Posted
技术标签:
【中文标题】尝试初始化 Cloud Firestore 时，firebase.firestore() 不是函数【英文标题】：firebase.firestore() is not a function when trying to initialize Cloud 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' 是正确的语法。
【参考方案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 来盲目复制和粘贴。请编辑您的答案并解释它如何回答所提出的具体问题。见【如何回答】***.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
]
【讨论】：
这个答案可能重复***.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 标签不会有太大帮助。此外，为了提高您的回答质量，请尽量不要要求投票。以上是关于尝试初始化 Cloud Firestore 时，firebase.firestore() 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
无法安装 cloud_firestore 所需的 BoringSSL-GRPC (0.0.7)
包 cloud_firestore 没有匹配的版本 >=0.7.0 <0.8.0 派生自