使用 react 导入错误 firebase/firestore答案

【问题标题】：Import error firebase/firestore using react使用 react 导入错误 firebase/firestore
【发布时间】：2021-11-05 18:51:15
【问题描述】：

我在使用 Firestore 时遇到了问题。我想从 firebase 读取一些数据，但我无法从 firebase 导入集合尝试导入错误：“collection”未从“firebase/firestore/”导出。我读过一些文章说这个问题与 v9 SDK 有关。

【问题讨论】：

你能在 CLI 中运行 firebase --version 并告诉我你使用的是什么版本的 firebase 吗？

标签： reactjs database firebase google-cloud-firestore

【解决方案1】：

您必须正确导入 Firebase SDK。问题在于您直接从“firebase”导入的第一行，这不是理想的方法，根据我的理解，导入调用/方法与版本更改不同步。请务必阅读the documentation on using Firebase with module bundlers

从 Firebase v8.0.0 开始，您必须按照 documentation 导入 Firebase SDK，其中提到 8.0 版中存在重大变化

package.json 文件中的浏览器字段现在指向 ESM 包 CJS 捆绑包。使用 ESM 导入的用户现在必须使用默认导入而不是命名空间导入

8.0.0 之前

import * as firebase from 'firebase/app'

8.0.0 之后

import firebase from 'firebase/app'

使用 require('firebase/app') 或 require('firebase') 的代码仍然可以工作，但您应该将这些 require 调用更改为 require('firebase/app').default 或 require('firebase').default

如下所示更改您的代码：

import firebase from "firebase/app" 
import { getFirestore } from "firebase/firestore";
import { collection, addDoc, getDocs } from "firebase/firestore";
import "firebase/auth" 
const auth = firebase.auth()

这应该适合你。如果没有，那么您可能已将 SDK 版本从 8 更新到 9，并且在版本 9 中，导入 firebase 的情况有所改变，但无需降级到以前的版本，有一个“兼容性”选项，因此可以使用/compat 文件夹中的导入，像这样

import firebase from 'firebase/compat/app';

来自Firebase documentation：

为了在更新依赖项后保持代码正常运行从 v8 到 v9 beta，将您的导入语句更改为使用“compat” 每个导入的版本如下所示（v9 兼容包是 API 兼容 v8 代码）：

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

【讨论】：

非常感谢，解决了我的问题。
第二个代码 sn-p 似乎同时使用了名称空间和模块化语法。由于firebase 是从firebase/app 而不是/compat 版本导入的，firebase.auth() 可能会导致错误。

【解决方案2】：

该错误消息意味着模块“firebase/firestore/”中没有这样的导出“集合”。因此，当您尝试导入“集合”时，错误出现在第二行。

在文档中，“firebase/firestore”中没有结尾的“/”。尝试删除尾随的“/”，然后重试。

我建议你按照this 设置firestore的指南

【讨论】：