React集成Firebase用户认证报firebaseApp.auth is not a function求助

核心错误原因 #

你代码的报错主要来自以下几处逻辑问题：

• 导入不匹配：同时混用Firebase v9模块化API和compat兼容API，且auth导入版本不匹配，你使用firebase/compat/app初始化实例，但导入的是非compat版的firebase/auth，导致实例上不存在auth()方法
• 冗余重复导入：重复引入了两次firebase/compat/app，还引入了未使用的模块化APIinitializeApp、getAuth
• props解构逻辑错误：user、signOut等属性是高阶组件注入到App组件的参数，不能在组件外部通过this.props解构，函数组件也不支持this调用
• 缺失资源导入：代码中使用的logo变量没有对应的导入语句

修正后完整代码 #

import withFirebaseAuth from 'react-with-firebase-auth'
import firebase from 'firebase/compat/app';
// 匹配compat版本的auth导入
import 'firebase/compat/auth';
// 不需要analytics可以删除下面这行
import 'firebase/compat/analytics';

import firebaseConfig from './firebaseConfig';
// 按你项目实际logo路径调整导入
import logo from './logo.svg';

const firebaseApp = firebase.initializeApp(firebaseConfig);

const firebaseAppAuth = firebaseApp.auth();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};

// 属性直接从组件参数解构，不需要this
function App({ user, signOut, signInWithGoogle }) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {
          user
            ? <p>Hello, {user.displayName}</p>
            : <p>Please sign in.</p>
        }
        {
          user
            ? <button onClick={signOut}>Sign out</button>
            : <button onClick={signInWithGoogle}>Sign in with Google</button>
        }
      </header>
    </div>
  );
}

export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);

额外说明 #

如果你后续想完全改用Firebase v9的模块化API，可以删除所有compat相关导入，使用getAuth获取auth实例，但需要确认react-with-firebase-auth库是否支持v9版本API，不支持的话可以自行实现认证逻辑，不需要依赖第三方库。

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