React项目使用Firebase9出现query导出失败、无默认导出错误如何解决

根因说明 #

两个报错均由版本不兼容导致：Firebase 9.x 全面改用模块化API，废弃了v8版本的命名空间默认导出方式，同时你当前安装的react-firebase-hooks@3.x仅适配Firebase 8.x版本。

可选解决方法 #

方法1：使用Firebase 9.x 标准模块化写法（推荐） #

1. 先升级适配v9的hooks版本：

npm install react-firebase-hooks@latest

2. 修改Firebase初始化代码为模块化写法：

// 核心初始化方法导入
import { initializeApp } from "firebase/app";
// Firestore相关方法导入
import { query, where, getFirestore } from "firebase/firestore";
// Auth、Analytics模块导入
import { getAuth } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
// 升级后的hooks可直接适配v9
import { useAuthState } from 'react-firebase-hooks/auth';

const firebaseConfig = {
  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"
};

// 初始化各服务实例
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const analytics = getAnalytics(app);

后续业务代码中直接使用导入的query、where方法即可，useAuthState传入上方导出的auth实例即可正常使用。

方法2：保留原有v8写法，无需修改业务逻辑 #

可从下面两种操作任选其一：

• 降级到Firebase 8.x版本
  执行安装命令即可，原有代码无需任何调整：

npm install firebase@8

• 使用v9的兼容包
  安装v9版本后，仅修改导入路径为兼容路径即可，其余初始化、业务代码均不变：

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

// 原有代码保持不变
import { useAuthState } from 'react-firebase-hooks/auth';

firebase.initializeApp({
  // 原有配置
})

内容的提问来源于stack exchange，提问作者Patato