时间戳

首页 > 解决方案 > Firebase ReactJS useEffect TypeError：无法读取 null 的属性“uid”

reactjs - Firebase ReactJS useEffect TypeError：无法读取 null 的属性“uid”

问题描述

一般来说，我是 ReactJS 和 web-dev 的新手。我知道这个问题被问了很多，我尝试了许多不同的解决方案，但似乎都没有解决我的问题。我有 Firebase 用户身份验证，当有人创建帐户时，它会在“用户”集合下创建一个文档。文档 ID 与 UID 相同。我正在尝试获取存储在文档中的字段值（fname，lname）。我认为问题是在组件呈现时没有检索到 currentUser.uid？抱歉，如果我的术语有误。

测试.js

const [fname, setFname] = useState('');
const [lname, setLname] = useState('');
const auth = firebase.auth();
const db = firebaseApp.firestore();


    useEffect( () => {
        let uid = auth.currentUser.uid;

        if(auth){
            db.collection("user").doc(uid)
            .onSnapshot( snapshot => {
                setFname(snapshot.fname);
                setLname(snapshot.lname);
            })
        } else{

        };
    }, );
    return (
        <div className="test">
            <p>this is here</p>
            <p>{!auth ? "This is null" : fname}</p>
            
        </div>
    )

我的理解是 useEffect 仅在组件安装后运行。uid 很少被成功检索，但只有十分之一次。

我尝试在 App.js 下运行 onAuthStateChanged 并将 uid 作为道具传递给 Test.js，但同样的问题也不断发生。

应用程序.js

const [{}, dispatch] = useStateValue();
const [uid, setUID] = useState(null);

  useEffect(() => {
    // will only run once when the app component loads...
    auth.onAuthStateChanged((authUser) => {
      console.log("THE USER IS >>> ", authUser);
      console.log(uid)

      if (authUser) {
        // the user just logged in / the user was logged in
        dispatch({
          type: "SET_USER",
          user: authUser,
        });
        setUID(auth.currentUser.uid);
      } else {
        // the user is logged out
        dispatch({
          type: "SET_USER",
          user: null,
        });
      }
    });
  }, []);

标签： reactjsfirebasefirebase-authenticationreact-hooks

解决方案

发生错误是因为currentUser在undefined执行此块时，因此您需要等待 auth 更新。

添加auth为依赖项useEffect：

useEffect( () => {
    if(auth.currentUser){
        let uid = auth.currentUser.uid;

        db.collection("user").doc(uid)
        .onSnapshot( snapshot => {
            setFname(snapshot.fname);
            setLname(snapshot.lname);
        })
    } else{

    };
},[auth]);

推荐阅读