React项目中Firebase v10重复邮箱认证错误无法捕获求助

核心问题 #

你的signup函数没有返回Promise，也未处理Firebase抛出的错误，导致注册页面的try/catch无法捕获异常。此外，写入Firestore的setDoc操作也可能出错，同样需要纳入错误处理逻辑。

修复步骤 #

1. 修改AuthContext中的signup函数 #

让函数返回完整的Promise链，确保异步操作的错误能被上层捕获：

const AuthContext = createContext()

export function useAuth() {
    return useContext(AuthContext)
}

export function AuthProvider({ children }) {

    const [currentUser, setCurrentUser] = useState()
    const [loading, setLoading] = useState(true)

    function signup(email, password) {
        // 返回Promise链，确保异步操作的错误能传递到上层
        return methods.createUserWithEmailAndPassword(auth, email, password).then(cred =>{
            let userType;
            if (email.substring(email.indexOf('@') + 1) === "sun.ac.za"){
                userType = "student";
            } else {
                userType = "company";
            }
            let data = {
                email: cred.user.email,
                type: userType
            };
            // 返回setDoc的Promise，确保写入数据库的错误也能被捕获
            return setDoc(doc(users, cred.user.uid), data);
        })
    }
}

2. 优化注册页面的错误处理 #

根据Firebase错误代码返回更精准的提示，比如重复邮箱对应的错误代码是auth/email-already-in-use：

async function handleSubmit(e) {
    e.preventDefault();

    if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailRef.current.value))) {
        return setError("请输入有效的邮箱地址。");
    }

    if (passwordRef.current.value.length < 6) {
        return setError("密码长度至少为6位。");
    }

    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
        return setError("两次输入的密码不一致。");
    }

    try {
        setError("")
        setLoading(true)
        await signup(emailRef.current.value, passwordRef.current.value)
        navigate('/'); // 仅注册成功时跳转
    } catch (e) {
        // 根据错误代码返回具体提示
        if (e.code === 'auth/email-already-in-use') {
            setError("该邮箱已被注册，请更换其他邮箱。");
        } else {
            setError("无法创建账户，请稍后重试。");
        }
    } finally {
        setLoading(false); // 无论成功失败都关闭加载状态
    }
}

关键说明 #

• 必须让signup返回Promise，这样await才能等待异步操作完成，异常才能被try/catch捕获。
• setDoc是异步操作，返回它的Promise能确保数据库写入错误也能被上层捕获。
• 利用Firebase的错误代码可以给用户更精准的反馈，提升体验。

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