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

Question

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

现在，当我想把数据放到下一页时，我使用的是本地存储。

使用async/await语法等待加载currentUser对象的最佳方式是什么？我认为原因可能是firebase在加载一些身份验证功能后，第一个结果返回null，然后更正uid。

Answer 1

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

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不会返回promise，而是在每次用户的身份验证状态更改时激发。

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;