集成Firebase Authentication时网页空白问题求助

1. 修正React事件绑定语法 #

React中事件属性需使用驼峰命名，你代码里的onclick是原生JS写法，不符合React规范，这会导致按钮点击无响应，也可能引发隐性渲染问题：

// 错误写法
<Button onclick = {signIn}> Sign In</Button>

// 正确写法
<Button onClick={signIn}> Sign In</Button>

2. 补全Firebase模块导入 #

仅导入firebase/compat/app不足以使用Auth功能，必须单独导入兼容版本的Auth模块，否则调用firebase.auth()会触发未定义错误，导致组件渲染失败（页面空白）：

// 在firebase.js顶部添加以下导入
import 'firebase/compat/auth';
import 'firebase/compat/firestore'; // 若使用Firestore也需导入

// 其余代码保持不变
import firebase from 'firebase/compat/app';

const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
    appId: "***",
    measurementId: "***"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider()

export {auth, provider};
export default db;

3. 验证组件挂载入口 #

确认Login组件已被正确挂载到应用根节点，例如在App.js中：

import Login from './Login';

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

完成以上修改后，重新启动应用，页面应该能正常渲染，登录按钮也可正常触发Google认证弹窗。

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