Next.js Firebase Auth结合Context实现持久化登录遇类型错误求助

问题1：调用login时提示「login不是函数」 #

错误原因 #

Context文件里的AuthUserProvider组件犯了低级错误：你把useFirebaseAuth这个hook函数本身赋值给了变量，而没有调用这个hook。导致Context提供的value是hook函数，不是它返回的包含login、authUser的对象，解构时自然找不到login方法。

修复Context文件 #

修改AuthUserProvider代码，正确调用hook并传递返回值：

import { createContext, useContext } from "react";
import { useFirebaseAuth } from "../firebase";

const authUserContext = createContext({
  authUser: null,
  loading: true,
  login: async () => {},
});

export function AuthUserProvider({ children }) {
  // 关键修改：调用useFirebaseAuth hook，拿到返回的auth数据
  const authData = useFirebaseAuth();

  return (
    <authUserContext.Provider value={authData}>{children}</authUserContext.Provider>
  );
}

export const useAuth = () => useContext(authUserContext);

问题2：登录后刷新页面需要重新登录 #

错误原因 #

1. Firebase Auth的signInWithEmailAndPassword调用参数错误：多传了一个auth实例作为第一个参数，正确调用格式是auth.signInWithEmailAndPassword(email, password)。
2. onAuthStateChanged的loading状态处理有瑕疵，刷新时可能导致状态判断错误。

修复Firebase相关代码 #

修正login函数参数，并优化auth状态监听逻辑：

import { useState, useEffect } from "react";
// 确保导入正确初始化的auth实例
import { auth } from "./firebase-config";

function useFirebaseAuth() {
  const [authUser, setAuthUser] = useState(null);
  const [loading, setLoading] = useState(true);

  const formatAuthUser = (user) => ({
    uid: user.uid,
    email: user.email,
  });

  const authStateChanged = async (authState) => {
    if (!authState) {
      setAuthUser(null);
      setLoading(false);
      return;
    }
    setLoading(true);
    const formattedUser = formatAuthUser(authState);
    setAuthUser(formattedUser);
    // 这里用formattedUser，因为setAuthUser是异步的，authUser尚未更新
    console.log("useAuth " + formattedUser.email);
    setLoading(false); // 状态更新后结束loading
  };

  const login = (email, password) => {
    // 关键修改：去掉多余的auth参数
    return auth.signInWithEmailAndPassword(email, password);
  };

  useEffect(() => {
    const unsub = auth.onAuthStateChanged(authStateChanged);
    // 组件卸载时取消监听
    return () => unsub();
  }, []);

  return {
    authUser,
    loading,
    login,
  };
}

export { useFirebaseAuth };

额外注意事项 #

• 在页面组件中，要根据loading状态做判断，比如loading为true时显示加载框，避免刷新时短暂出现未登录状态。
• 确保Firebase Auth实例已正确初始化（比如在firebase-config.js中完成initializeApp和getAuth调用），这是所有功能正常运行的前提。

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