TypeError: currentUser is null in firebase react

Question

我發現我的問題已經回答了不同的問題，但沒有幫助。

我使用自定義上下文調用firebase.auth().onAuthStateChanged()並設置currentUser 。

import React, { useState, useEffect } from "react";
import app from "../firebase";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    app.auth().onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

在我的組件中，我調用AuthContext和currentUser ：

import React, { useContext, useEffect, useState } from "react";
import app from "./firebase";
import { AuthContext } from "./Auth/Auth";

function MyComponent() {
  const [invoices, setInvoices] = useState([]);
  const { currentUser } = useContext(AuthContext);

  const getInvoices = () => {
    const database = app.firestore();
    const unsubscribe = database
      .collection("invoices")
      .where("uid", "==", currentUser.uid) // HERE currentUser IS NULL
      .orderBy("date", "desc")
      .onSnapshot((snapshot) => {
        setInvoices(
          snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
        );
      });

    return () => {
      unsubscribe();
    };
  };

  useEffect(() => {
    getInvoices();
  }, []);

  return (<> ... </>);
}
export default MyComponent;

我相信我的問題與承諾有關，並且用戶尚未加載。 但我仍然不知道在這里做什么。

Answer 1

潛在的問題可能是currentUser的值稍后返回，因此您需要在MyComponent組件中添加額外的檢查。

我會添加null檢查currentUser並將依賴項數組擴展為：

useEffect(() => {
  if (currentUser) {
     getInvoices();
  }
}, [currentUser]);

可能在第一輪中，一旦currentUser仍然是null ， useEffect回調就會運行。