Fetching data from Firebase and storing in local state is undefined - firebase

Question

I am fetching data from firebase with the result being undefined. When I comment out the elements that use the data, the data gets stored in state, I uncomment the elements and they render without any issues. When I make changes and save the file, it reverts back to being undefined and the elements do not render.
Here is the code I am currently working with :
const router = useRouter();
const { make, model, id } = router.query;
const [singleCar, setSingleCar] = useState([]);
const docRef = doc(db, "car listings", `${id}`);
useEffect(() => {
const fetchDetails = async () => {
await getDoc(docRef).then((doc) => {
const carData = doc.data();
setSingleCar(carData);
});
await onSnapshot(docRef, (doc) => {
const carData = doc.data();
setSingleCar(carData);
});
};
fetchDetails();
}, [singleCar]);
I know I am both fetching a single doc and adding in a real-time listener but I wasn't sure which would be the best action, given the getDoc method only runs once after fetching the document so thought it might be better to have a real-time listener also in place.
Here is what I am rendering, my thinking is that if state is undefined, render the Loader component until the state has changed with the appropriate data.
{singleCar === [] ? (
<Loader />
) : (
<Container maxW="container.xl">
<Box display="flex" justifyContent="space-around">
<Image
w="500px"
src={singleCar.carImages[0].fileURL}
borderRadius="10px"
/>
{/* <CarImageGalleryModal isOpen={isOpen} onClose={onClose} /> */}
<Box
display="flex"
flexDirection="column"
justifyContent="space-between"
>
<SingleCarPrimary
make={singleCar.carDetails.make}
model={singleCar.carDetails.model}
year={singleCar.carDetails.year}
doors={singleCar.carDetails.doors}
engineSize={singleCar.carDetails.engine_size}
fuelType={singleCar.carDetails.fuel_type}
body={singleCar.carDetails.year}
price={singleCar.carPrice}
/>
<ContactSection />
</Box>
</Box>
<CarSummary carDetails={singleCar.carDetails} />
<SingleCarDescription carDescription={singleCar.carDescription} />
</Container>
)}
Here is how the information is being stored in Firebase to give you an idea of what data is being retrieved.
Backend: Firebase version 9
Frontend: Next.js / Chakra UI

Answer 1

The issue should be with the queried document identifier that is not referring to any document, hence the undefined properties result you are getting.
Here down a list of fixes you should apply to your implementation to mitigate such an issue.
You are better using a separate loading state that is will be reset once data is loaded so that it can reflect both loading and empty results:
const router = useRouter();
const { make, model, id } = router.query;
const [singleCar, setSingleCar] = useState({}); // the car should be an object and not an array
const [loading, setLoading] = useState(true);
const docRef = doc(db, "cars", `${id}`); // avoid spaces in document names
useEffect(() => {
const fetchDetails = async () => {
await getDoc(docRef).then((doc) => {
setLoading(false);
if (doc.exists()) {
setSingleCar(doc.data());
}
});
};
// fetch the `car` data
fetchDetails();
// then attach the change listener
await onSnapshot(docRef, (doc) => {
const carData = doc.data();
setSingleCar(carData);
});
}, []); // you should not rerun the effect on state changes as this will keep on reattaching state listener again and again and may fall into endless fetching loops
You component declaration then may be updated as follows (you may still need to update it to reflect empty car state => the data is fetched but there is not car reflecting the queried id):
{loading === true ? (
<Loader />
) : (
<Container maxW="container.xl">
<Box display="flex" justifyContent="space-around">
<Image
w="500px"
src={singleCar.carImages[0].fileURL}
borderRadius="10px"
/>
{/* <CarImageGalleryModal isOpen={isOpen} onClose={onClose} /> */}
<Box
display="flex"
flexDirection="column"
justifyContent="space-between"
>
<SingleCarPrimary
make={singleCar.carDetails.make}
model={singleCar.carDetails.model}
year={singleCar.carDetails.year}
doors={singleCar.carDetails.doors}
engineSize={singleCar.carDetails.engine_size}
fuelType={singleCar.carDetails.fuel_type}
body={singleCar.carDetails.year}
price={singleCar.carPrice}
/>
<ContactSection />
</Box>
</Box>
<CarSummary carDetails={singleCar.carDetails} />
<SingleCarDescription carDescription={singleCar.carDescription} />
</Container>
)}

Answer 2

I was able to fix this using the method of getServerSideProps which I think removes the need for useEffect.