Necesito usar datos de firestore y los recupero con getDoc() de la siguiente manera
useEffect(async()=>{ const docRef = doc(db, "users",user.uid ); const docSnap = await getDoc(docRef); if (docSnap.exists()) { const data = docSnap.data(); const pic = docSnap.data().photo; console.log("data is :", data); console.log("pic is :", pic); } else { // doc.data() will be undefined in this case console.log("No such document!"); } })obtener datos de la siguiente manera
data is : Object { "age": "25", "displayName": "nmar Bot", "gender": "male", "id": "2wj8dAF9QXYmAWsqKzDSNlyKzzw1", "job": "dr", "photo": "https://firebasestorage.googleapis.com/v0/b/meet-332208.appspot.com/o/images%2F2wj8dAF9QXYmAWsqKzDSNlyKzzw1%2FprofilePicture.jpeg?alt=media&token=ee74dbd1-26e1-4864-9a9a-c7620d37b902", "timestamp": Object { "nanoseconds": 920000000, "seconds": 1638348589, }, } pic is :"https://firebasestorage.googleapis.com/v0/b/meet-332208.appspot.com/o/images%2F2wj8dAF9QXYmAWsqKzDSNlyKzzw1%2FprofilePicture.jpeg?alt=media&token=ee74dbd1-26e1-4864-9a9a-c7620d37b902"pero ¿cómo se pueden utilizar estos datos en este
source = {{uri :pic }}y cómo se puede llamar a cada dato para que se muestre de la siguiente manera
name is : age is : gender is : photo is : job is :¿alguien me puede ayudar?
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> </>)