React结合FirebaseUI与Firestore（含firebase.js）实现谷歌登录问题咨询

1. 核心问题定位 #

你当前的配置存在两个核心遗漏点：

• firebase.js中没有导入Firebase Auth的兼容包，直接调用firebase.auth()会触发未定义报错
• firebase.js默认仅导出了firebase.firestore()实例，App.js中无法拿到全局firebase对象调用auth相关方法

2. 第一步：修复firebase.js配置 #

import firebase from 'firebase/compat/app'
import "firebase/compat/firestore";
// 新增导入Auth兼容包
import "firebase/compat/auth";

let config = {
   apiKey: "XXXX",
   authDomain: "XXXX",
   databaseURL: "XXXX",
   projectId: "XXXX",
   storageBucket: "XXXX",
   messagingSenderId: "XXXX",
   appId: "XXXX",
};

firebase.initializeApp(config);

// 分别导出不同实例方便业务调用
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export default firebase;

3. 第二步：修复App.js逻辑 #

首先确保你已经安装了适配的依赖：firebase 9.x兼容版、react-firebaseui对应版本。
其次修正导入和配置代码：

// 从本地配置文件导入firebase实例，不要直接从firebase包导入
import firebase from './firebase';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

// 原有逻辑修正
state = { isSignedIn: false }
uiConfig = {
  signInFlow: "popup",
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // 替换已废弃的signInSuccess回调
    signInSuccessWithAuthResult: () => false
  }
}

componentDidMount = () => {
  firebase.auth().onAuthStateChanged(user => {
    this.setState({ isSignedIn: !!user })
    console.log("user", user)
  })
}

4. 补充渲染逻辑 #

在App.js的render方法中加入登录组件渲染判断：

render() {
  return (
    <div className="App">
      {this.state.isSignedIn ? (
        <div>
          <h1>登录成功</h1>
          <button onClick={() => firebase.auth().signOut()}>退出登录</button>
        </div>
      ) : (
        <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
      )}
    </div>
  )
}

额外注意事项 #

• 需提前在Firebase控制台的「身份验证」板块开启谷歌登录权限，否则会触发provider未启用报错
• 若使用函数式组件，可将上述类组件逻辑对应替换为useState、useEffect实现，核心逻辑保持一致

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