Next.js 13项目Firebase用户认证：页面权限控制的判断问题

你的问题出在AuthContext传递的值结构不匹配：

在AuthContextProvider里，你把Context的value设成了一个对象{ user }，所以当你在页面调用useAuthContext()时，拿到的不是直接的用户状态，而是一个包含user属性的对象（比如{user: null}）。这就是为什么user === null返回false——你拿整个对象和null比，当然不相等。

解决办法有两种： #

办法1：在页面里解构获取用户状态

修改页面里的代码，从Context返回的对象中解构出user：

export default function MyPage() {
  // 解构出实际的user值
  const { user } = useAuthContext()
  const router = useRouter()
  
  React.useEffect(() => {
        if (user === null) router.push("/login")
    }, [user])
  
  // ... 页面其他代码
}

办法2：修改AuthContext的传递值

如果你希望useAuthContext()直接返回用户状态，可以修改AuthContextProvider里的value：

// 在AuthContextProvider的return部分，把value从{ user }改成user
return (
    <AuthContext.Provider value={user}>
        {loading ? <div>Loading...</div> : children}
    </AuthContext.Provider>
);

同时，初始化Context时建议指定类型（可选，但更规范）：

// 替换原来的createContext({})
export const AuthContext = React.createContext<firebase.User | null>(null);

这样页面里原来的判断逻辑if (user == null)就能正常工作了。

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