I need to use data from firestore and I retrive them by getDoc() as follow
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!");
}
})
get data as follow
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"
but how can use this data in this
source = {{uri :pic }}
and how can call each data to display as follow
name is :
age is :
gender is :
photo is :
job is :
can someone help me?
Because the Firebase SDKs are promise-based APIs, you should make use of a useAsyncEffect implementation where possible like @react-hook/async and use-async-effect. This allows you to trim a lot of unnecessary bloat.
The below code sample is commented to explain what each section does, along with any notes regarding what particular lines do.
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>
</>)