Question

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

Test.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，但同样的问题也不断发生。

App.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,
        });
      }
    });
  }, []);

Answer 1

出现这个错误是因为执行这个block时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]);

Answer 2

试试这个：

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

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

        };
    }, [auth] );

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

2 个答案: