I can not get id for each item in the collection with useCollectionData hook
feelforyou opened this issue · 2 comments
feelforyou commented
When i try to debug and console.log (listings) or console.log(car)
I dont get id for each item, except id i can get every field that is in my collection.
I think {idField:'id:} is not grabbing id from the collection
As a side note I am using firebase 9, installed react-firebase-hooks @latest , created
Vite react project @latest
simple example:
import React from "react";
import { useGlobalContext } from "../../../Context/Context";
import { db } from "../../../FirebaseConfig/firebaseConfig";
import { collection, query, where } from "firebase/firestore";
import { useCollectionData } from 'react-firebase-hooks/firestore';
import CarListing from "./CarListing";
const Listings = () => {
const { user } = useGlobalContext();
const carsRef = collection(db, "cars");
const q = query(carsRef, where("addedByUID", "==", user?.uid));
const [listings, loading, error] = useCollectionData(q, { idField: 'id' });
if (loading) {
return <div className="loading"></div>;
}
if (error) {
console.error("Error fetching user listings: ", error);
return <div>Error fetching data</div>;
}
return (
<div className="listing-car-container">
{listings && listings.length > 0 ? (
listings.map((car) => <CarListing key={car.id} car={car} />)
) : (
<p>You haven't listed any cars yet.</p>
)}
</div>
);
};
export default Listings;tigerxy commented
You can append the id to your documents with the FirestoreDataConverter. You will receive the id in the fromFirestore function with the snapshot.id value. An example how to do this is in the documentation under transforming-data
syuabov commented
@feelforyou did you ever get the { idField: 'id' } to grab the id from the doc