firebase.auth().currentUser 在页面加载时为 null

Question

我成功地使用 onAuthStateChange 观察者检查了用户的身份验证 state 并将用户重定向到个人资料页面。 但是，我已经想在个人资料上显示一些特定于用户的数据（例如描述）。 为此，我需要初始化和填充 currentUser object，这需要一些时间（我需要从那里获取 uid 以从 firestore 获取一些数据）。 因此，我正在寻找某种方法来等待此过程成功完成。 我试图在配置文件页面上使用 async/await 语法，但返回的结果是 null。

现在，当我想将数据获取到下一页时，我正在使用本地存储。

使用异步/等待语法等待 currentUser object 加载的最佳方法是什么？ 我相信原因可能是 firebase 返回 null 作为第一个结果，然后更正 uid - 在加载了一些身份验证功能之后。

Answer 1

您所描述的正在按预期工作。 如果您希望代码仅在用户的登录状态恢复后运行，则它需要位于 auth 状态更改侦听器内，如有关获取当前登录用户的文档中的第一个代码片段所示：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // 👈 Your code that needs an active user goes here
  } else {
    // User is signed out
    // ...
  }
});

此处无法使用await ，因为onAuthStateChanged不返回承诺，而是在每次用户的身份验证状态更改时触发。

Answer 2

我在 React js 中创建了一个专门的钩子来处理这个问题：

import { useEffect, useState } from "react";
import { User } from "firebase/auth";
import { auth } from "../lib/firebase";

const useAuth = () => {
    const [user, setUser] = useState<User | null>(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        return auth.onAuthStateChanged(user => {
            setUser(user);
            setIsLoading(false);
        });
    }, []);

    return {
        user, isLoading
    };
}

export default useAuth;