having some trouble while displaying data in my NextJS app.
I'm fetching data from Firebase, the interface looks like so:
export default interface IUser {
name: string;
email: string;
uid: string;
profileImageURL: string;
publicData: {
phone: string;
address: string;
}
}
When i'm accessing users/[id]/page.tsx i'm fetching the data:
const [userData, setUserData] = useState({} as IUser);
useEffect(() => {
const fetchData = async () => {
try {
setIsLoading(true);
const IUser = await fetchUserData(params.id)
.then((data) => {
setUserData(data)
setIsLoading(false);
})
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []);
When i try to display the data anything that is not in publicData
is displayed without a problem, that being name, email, etc. When i try to access and display userData.publicData.address
, i get an error TypeError: Cannot read properties of undefined (reading 'address')
Not really sure what is the issue here, since console logs do show the data without a problem, thought it maybe related to the User interface.
Thanks in advance for all the tips and solutions.
UPDATE
Adding a screenshot of the firebase structure
Also adding code of fetchUserData
import IUser from "../interfaces/User";
import { getCache, setCache } from "./cache";
export const fetchUserData = async (uid: string): Promise<IUser> => {
const cacheKey = 'userData_' + uid;
const cachedData = getCache(cacheKey);
if (cachedData) {
console.log('Returning cached data:', cachedData);
return cachedData as IUser;
}
const response = await fetch('https://dev/auth/user?id=' + uid,
{
method: 'get',
headers: {
'Content-type': 'application/json'
}
})
if (!response.ok) {
throw new Error("Failed to fetch user data");
}
const data: IUser = await response.json();
console.log('Fetched data:', data);
setCache(cacheKey, data);
return data;
};
This is happening because where ever you are trying to use display data or use data. You haven't checked weather data is available or not. fetching data takes some time. so you must add condition where before using the data, you should check weather data is fetched or not. For example: In react when rendering you can do
userData?.length > 0 && userData?.map(user => {
//what ever data you are trying to render
});
And not forget to use '?' before dot or otherwise you will see error screen. At least your app won't crash. Hope that will help you. Thanks