Debido a que los SDK de Firebase son API basadas en promesas, debe utilizar una implementación de useAsyncEffect siempre que sea posible, como @react-hook/async y use-async-effect . Esto le permite recortar una gran cantidad de hinchazón innecesaria .

El ejemplo de código a continuación se comenta para explicar lo que hace cada sección, junto con las notas sobre lo que hacen las líneas en particular.

 import {useAsyncEffect} from '@react-hook/async' /* ... */ const [user, userLoading] = useAuth(); // details of this will depend on what AuthContext you use here // =================================== // Getting the data // =================================== const { status, error, value: userData } = useAsyncEffect(async () => { if (userLoading) throw new Error("loading"); // user session not validated yet if (!user) throw new Error("signed-out"); // not signed in const docRef = doc(db, "users", user.uid); return getDoc(docRef) .then((snap) => { if (!snap.exists()) throw new Error("not-found"); // document missing return snap.data(); }); }, [user, userLoading]); // rerun when user/userLoading changes // =================================== // Handling different result states // =================================== // if errored, pass the error's code (for // firebase errors) or message (for other // errors) to the switch instead so you // can handle them by simply adding a // case to it. switch (status === "error" ? error.code || error.message : status) { case "loading": return null; // hides component case "cancelled": /* handle cancelled */ return (<div class="error">Operation cancelled</div>) case "not-signed-in": /* handle not signed in */ return (<div class="error">Not signed in</div>) case "not-found": /* handle document not found */ return (<div class="error">Profile data not found</div>) default: /* handle other errors */ return ( <div class="error"> Failed to retrieve data: {error.code || error.message} </div> ); case "success": // continues below outside switch } // =================================== // Rendering out the completed content // =================================== // Here, userData is your document's data and // you could also use a deconstruction pattern // to split it up rather than reference it like // I have: // const { name, age, gender, pic, job } = userData; return (<> <img src={userData.pic} /> <p>Name: {userData.name}</p> <p>Age: {userData.age}</p> <p>Gender: {userData.gender}</p> <p>Photo: <a href={userData.pic}>{userData.pic}</a></p> <p>Job: {userData.job}</p> </>)