尝试导入错误：“查询”未从“firebase/firestore”导出

Question

我是初学者，请帮忙，我试图找到解决方案，但没有任何效果。

import firebase from 'firebase/app';
import {query, where} from "firebase/firestore";

import 'firebase/auth';
import 'firebase/analytics';

import { useAuthState } from 'react-firebase-hooks/auth';

firebase.initializeApp({
  apiKey: "AIzaSyAKLyeY2FbjFDD57Kp9sGDi8uHg3neXxjI",
  authDomain: "digitots-dev.firebaseapp.com",
  projectId: "digitots-dev",
  storageBucket: "digitots-dev.appspot.com",
  messagingSenderId: "150130182744",
  appId: "1:150130182744:web:4aba8f8c3b54a74f94182d",
  measurementId: "G-NHKFKD97C5"
})

错误是

尝试导入错误：“查询”未从“firebase/firestore”导出。

这是我的 package.json

{
  "name": "digitots",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "animated-number-react": "^0.1.2",
    "firebase": "^9.0.0",
    "materialize-css": "^1.0.0-rc.2",
    "react": "^17.0.2",
    "react-countup": "^5.2.0",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我试过 npm i firebase@9.0.0 现在它有这个错误：

尝试导入错误：“firebase/app”不包含默认导出（导入为“firebase”）。

Answer 1

由于您使用的是刚刚发布的v9 SDK，因此不再有全局firebase导出。 相反，您需要导入您的代码使用的每个单独的 function。 如用于初始化模块化 v9 SDK的文档中所示，它看起来像：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseApp = initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

const db = getFirestore();

由于您似乎更习惯（或正在使用教程）旧版 v8 API，您也可以继续使用它 - 或者使用 v9 中的compat层。 语法是：

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

使用compat层不会让您获得新版本的大小优势，但它可以让您快速入门，然后逐步迁移到新语法（以及相关的大小差异）。

我建议检查：

• 关于新模块化的博文 JavaScript SDK (v9)
• 模块化升级指南SDK