Reactjs firestore使用react获取和显示数据

嘿，伙计们，我想展示我从firestore获得的数据。 当我在IDE中保存代码并且我在当前页面上时，它正在工作。 但是如果我转到另一个页面/刷新浏览器-它没有及时渲染/渲染，并渲染我设置他返回的“保持” 守则：

import React, { useState, useEffect } from 'react'
import firebase from 'firebase';
import { useAuth } from '../contexts/AuthContext';

export default function Cart() {

    const [userMail, setUserMail] = useState(undefined)
    const [userCart, setUserCart] = useState(undefined)
    const user = useAuth()
    const userDoc = firebase.firestore().collection("cart").doc(userMail)

    useEffect(() => {
        if (user.currentUser) {
            setUserMail(user.currentUser.email, console.log(userMail))
            userDoc.get().then((doc) => {
                if (doc.exists) {
                    let cart = doc.data()
                    setUserCart(cart)
                }
            })
        }
    }, [])


    if (userCart === undefined) return <h1>hold</h1>
    const { item } = userCart
    console.log(item);
    return (
        <main className="main-cart">
//here im try to make sure it got the data befor render//
            {item && item.map(item => {
                return (
                    <div key={item.itemId}>
                        <h3>{item.name}</h3>
                    </div>
                )
            })}
        </main>
    )
}

import React，{useState，useffect}来自“React”
从“firebase”导入firebase；
从“../Context/AuthContext”导入{useAuth}；
导出默认函数Cart（）{
const[userMail，setUserMail]=useState（未定义）
const[userCart，setUserCart]=useState（未定义）
const user=useAuth（）
const userDoc=firebase.firestore（）.collection（“cart”）.doc（userMail）
useffect（（）=>{
if（user.currentUser）{
setUserMail（user.currentUser.email，console.log（userMail））
userDoc.get（）。然后（（doc）=>{
如果（文件存在）{
let cart=doc.data（）
setUserCart（购物车）
}
})
}
}, [])
如果（userCart==未定义）返回保持
const{item}=userCart
控制台日志（项目）；
返回(
//在这里，我试图确保它在渲染之前得到了数据//
{item&&item.map（item=>{
返回(
{item.name}
)
})}
)
}

我只需将useffect中的第二个参数替换为userCart