React应用基于Context API和Firebase Auth的认证功能异常排查

我在React应用中使用Context API和Firebase Auth实现注册认证功能，但点击提交按钮后完全没有反应，控制台也未输出任何错误信息。例如空邮箱、密码长度小于6位这些场景，本该触发Firebase的认证错误提示，现在毫无动静。以下是相关代码：

SignUp组件代码 #

import { useState } from "react";
import { useUserAuth } from "./context/UserAuthContext";
import { UserAuthContextProvider } from "./context/UserAuthContext";

function SignUp() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError ] = useState("")
  const {signUp} = useUserAuth ();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try{
      await signUp(email, password);
    } catch (err){
    }
  } 

// React code omitted
}

UserAuthContext.js文件代码 #

import { createContext, useContext, useState, useEffect } from "react";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import { auth } from "../firebase";

const userAuthContext = createContext();

export function UserAuthContextProvider({ children }) {
  const [user, setUser] = useState("");

  function signUp(email, password) {
    return createUserWithEmailAndPassword(email, password);
  }

  function login(email, password) {
    return signInWithEmailAndPassword(auth, email, password);
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);
  return (
    <userAuthContext.Provider value={{ user, signUp }}>
      {children}
    </userAuthContext.Provider>
  );
}

export function useUserAuth() {
  return useContext(userAuthContext);
}

firebase.js文件代码 #

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // Settings for init app
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;

问题排查与修复 #

1. 错误捕获逻辑缺失 #

handleSubmit中的catch块为空，没有处理错误信息。修改后可以将错误存入状态并打印到控制台：

const handleSubmit = async (e) => {
  e.preventDefault();
  try{
    await signUp(email, password);
  } catch (err){
    setError(err.message);
    console.error("注册错误:", err);
  }
}

2. SignUp函数缺少Auth实例参数 #

createUserWithEmailAndPassword需要传入Firebase Auth实例作为第一个参数，否则调用会失败且无法触发预期错误。修改UserAuthContext中的signUp函数：

function signUp(email, password) {
  return createUserWithEmailAndPassword(auth, email, password);
}

3. 用户状态初始值错误 #

初始状态设为空字符串""不符合Firebase返回的用户对象格式，应改为null：

const [user, setUser] = useState(null);

4. 冗余的Provider导入 #

SignUp组件中不需要导入UserAuthContextProvider，该Provider应包裹在App或更高层级组件中，确保SignUp处于Provider的作用范围内。

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