CSFrequency/react-firebase-hooks

I can not get id for each item in the collection with useCollectionData hook

feelforyou opened this issue · 2 comments

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;

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

@feelforyou did you ever get the { idField: 'id' } to grab the id from the doc