React集成Firebase时报错firebase.auth is not a function如何解决？

• 你使用的是Firebase v9及以上版本，该版本提供了两套API：一套是全新的模块化tree-shaking友好的API，另一套是兼容v8旧写法的compat层API。
• 你当前仅对firebase/app使用了compat导入路径，但auth、firestore、analytics服务的导入仍使用了无compat前缀的模块化路径，两套API混用导致compat模式的firebase实例上未挂载auth()等旧版方法，触发类型错误。

这里提供两种修复方式，按需选择即可：

方案1：继续使用旧版兼容写法（无需修改现有业务逻辑） #

将所有服务的导入路径统一替换为compat前缀路径，修改后的导入代码如下：

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

修改后原有firebase.auth()、firebase.firestore()、firebase.analytics()的写法可直接正常运行。

方案2：改用官方推荐的模块化API（适合新项目、长期维护更优） #

完全抛弃compat层，使用新版模块化写法，整体代码调整如下：

import './App.css';
import React, { useRef, useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { useCollectionData } from 'react-firebase-hooks/firestore';

// 新版模块化导入
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getAnalytics } from "firebase/analytics";

const app = initializeApp({
  // 你的Firebase配置
})

// 初始化服务实例
const auth = getAuth(app);
const firestore = getFirestore(app);
const analytics = getAnalytics(app);

注意：需保证你安装的react-firebase-hooks版本为v5及以上，即可直接传入新的auth、firestore实例使用原有钩子逻辑。

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