React+Firebase登录页报错：'firebase' is not defined 求助

你的登录按钮点击事件里调用new firebase.auth.GoogleAuthProvider()和new firebase.auth.FacebookAuthProvider()时触发报错，核心原因是Login组件中未正确导入firebase对象，同时当前代码结构也没有提供可直接引用的firebase实例。

下面提供两种可行的修复方案：

方案一：从配置文件导出firebase实例 #

修改你的firebase.js，在导出auth的同时导出完整的firebase对象：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const app = firebase.initializeApp({
    apiKey: "AIzaSyCqJv-aBQrcD-afBqQrI7uZJ-VCbWGBrD0",
    authDomain: "simpchat-c8eb5.firebaseapp.com",
    projectId: "simpchat-c8eb5",
    storageBucket: "simpchat-c8eb5.appspot.com",
    messagingSenderId: "692332223424",
    appId: "1:692332223424:web:f6aac779101514b8544625",
    measurementId: "G-PQXQBGPRSH"
});

export const auth = app.auth();
export default firebase; // 导出firebase实例

然后在Login组件中导入firebase：

import React from 'react';
import { FacebookFilled, GoogleSquareFilled} from '@ant-design/icons';
import firebase from '../components/firebase';
import { auth } from '../components/firebase';

const Login = () => {
    return (
        <div id="login-page">
            <div id="login-card">
                <h1>Welcome to SimpChat!</h1>
                <h2 className="login-title">Login</h2>

                <div className="login-button google"
                       onClick={() => auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())}
                    >
                        <GoogleSquareFilled style={{ fontSize: '20px' }} />&nbsp; Sign In with Google
                </div>

                <br /><br />

                <div className="login-button facebook"
                      onClick={() => auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())}
                    >
                        <FacebookFilled style={{ fontSize: '20px' }} />&nbsp; Sign In with Facebook
                </div>
            </div>
        </div>
    );
}

export default Login;

方案二：直接导入AuthProvider类（推荐） #

由于你使用的是Firebase v9+的compat兼容模式，可以直接从firebase/compat/auth导入对应的Provider类，无需依赖全局firebase对象：
修改Login组件的导入和事件代码：

import React from 'react';
import { FacebookFilled, GoogleSquareFilled} from '@ant-design/icons';
import { auth } from '../components/firebase';
import { GoogleAuthProvider, FacebookAuthProvider } from "firebase/compat/auth";

const Login = () => {
    return (
        <div id="login-page">
            <div id="login-card">
                <h1>Welcome to SimpChat!</h1>
                <h2 className="login-title">Login</h2>

                <div className="login-button google"
                       onClick={() => auth.signInWithRedirect(new GoogleAuthProvider())}
                    >
                        <GoogleSquareFilled style={{ fontSize: '20px' }} />&nbsp; Sign In with Google
                </div>

                <br /><br />

                <div className="login-button facebook"
                      onClick={() => auth.signInWithRedirect(new FacebookAuthProvider())}
                    >
                        <FacebookFilled style={{ fontSize: '20px' }} />&nbsp; Sign In with Facebook
                </div>
            </div>
        </div>
    );
}

export default Login;

两种方案都能解决报错，方案二更符合模块化开发原则，避免对全局对象的依赖。

内容的提问来源于stack exchange，提问作者John Kelvin Atienza