React项目中Firebase Auth方法无法识别的问题求助

问题背景 #

在React项目中集成Firebase认证模块，使用Firebase v8.10.1版本时，出现Auth方法无法识别的报错：

Module "firebase/auth" has no exported member 'onAuthStateChanged'.
Module "firebase/auth" has no exported member 'signOut'.

尝试使用firebase/compat/auth未解决问题。

解决方案 #

1. 修正Firebase配置文件

Firebase v8需要显式导入auth模块，且auth实例的获取方式与v9不同，修改firebase.config.js如下：

import firebase from 'firebase/app';
// 必须导入auth模块才能使用认证功能
import 'firebase/auth';
import 'firebase/firestore';

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

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
// v8中通过firebase.auth()获取认证实例
const auth = firebase.auth();

export { auth };
export default db;

2. 调整认证组件的API调用方式

Firebase v8采用命名空间式API，所有认证方法挂载在auth实例上，而非模块化导入，修改AppAuthentication.js：

import React, { useState, useEffect } from 'react'
import { auth } from '../../firebase.config.js'

function AppAuthentication(){
    const [loginEmail, setLoginEmail] = useState("");
    const [loginEmailPass, setLoginEmailPass] = useState("");
    const [user, setUser] = useState(null);

    // 监听用户登录状态变化
    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(currentUser => {
            setUser(currentUser);
        });
        // 组件卸载时取消监听
        return unsubscribe;
    }, []);

    const login = async () => {
        try{
            const userCredential = await auth.signInWithEmailAndPassword(loginEmail, loginEmailPass);
            console.log('登录成功:', userCredential.user);
        }catch(error){
            console.error('登录失败:', error.message);
        }
    }

    const logout = async () => {
        try {
            await auth.signOut();
            console.log('退出登录成功');
        } catch (error) {
            console.error('退出登录失败:', error.message);
        }
    }

    return(
        <>
        <div>
            <h3>登录</h3>
            <br></br>
            <input 
                placeholder='邮箱'
                value={loginEmail}
                onChange={(event) => setLoginEmail(event.target.value)}
            />
            <br></br>
            <input 
                placeholder='密码'
                type="password"
                value={loginEmailPass}
                onChange={(event) => setLoginEmailPass(event.target.value)}
            />
            <br></br>
            <button onClick={login}>登录</button>

            <br></br>
            <h4>当前用户: {user ? user.email : '未登录'}</h4>

            <br></br>
            {user && <button onClick={logout}>退出登录</button>}
        </div>
        </>
    )
}

export default AppAuthentication;

3. 清理冗余依赖

package.json中同时存在firebase和@firebase/auth，会导致版本冲突，执行以下命令卸载冗余包：

npm uninstall @firebase/auth

问题原因 #

Firebase v8使用命名空间式API，所有功能方法挂载在核心实例上；而你之前的代码错误使用了Firebase v9+的模块化API写法（直接从firebase/auth导入单个方法），两种API风格不兼容导致报错。

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