我收到此错误：未捕获 TypeError：无法读取未定义的属性（读取“indexOf”）

仅当我重新加载页面时才会发生这种情况。第一次加载时没问题，但当我重新加载时就会发生这种情况。

我尝试执行类似以下操作：favoritesItems?.map((favorite) => .... 但没有帮助，所以我认为可能是身份验证中的问题？

编辑：如果我删除 const { user } = UserAuth() 并硬编码 UserID，即使重新加载后一切正常

Favorites.js

function Favorites() {
    
      const [favoritesItems, setFavoritesItems] = React.useState([])
      const { user } = UserAuth();
      const UserID = user.uid
      const favoritesRef = doc(db, "favorites", UserID)
    
      
      const unsub = onSnapshot(doc(db, "favorites", UserID), (doc) => {
        setFavoritesItems(doc.data().favs);
    });
    
    
    const removeFav = async (name) => {
      await updateDoc(favoritesRef, {
        favs: arrayRemove({"name": name.name, "ytb": name.ytb, "url": name.url})
    });
    
    }
        
      return (
        <div className="container mx-auto px-5 py-10">
        <h2 className="text-xl lg:text-3xl uppercase tracking-wider">My favorites collection</h2>
    
        <div className="flex flex-col items-center sm:items-start gap-10 mt-5 sm:grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
        {favoritesItems?.map((favorite) => (
    
          <div key={favorite.name} className="flex flex-col gap-2 w-64 md:w-72 ">
              <iframe src={favorite.url} title={favorite.name} allowFullScreen className="w-full" />
              <h1  className="font-light">{favorite.name}</h1>
              <div className="flex justify-between gap-3">
                <a href={favorite.ytb} target="_blank"><ExternalLinkIcon className="w-5 cursor-pointer" /></a>
                <TrashIcon onClick={() => removeFav(favorite)} className="w-5 cursor-pointer" />
              </div>
          </div>
    
          )) }
        </div>
        </div>
      )
    }
    export default Favorites

AuthContext.js

const UserContext = createContext();

export const AuthContextProvider = ({ children }) => {
   const [user, setUser] = useState({});

   const signIn = (email, password) =>  {
    return signInWithEmailAndPassword(auth, email, password)
   }

   const createUser = (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password);
  };

   const logout = () => {
     return signOut(auth)
   }


   useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);



  return (
    <UserContext.Provider value={{ createUser, signIn, user, logout }}>
      {children}
    </UserContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(UserContext);
};