CSFrequency / react-firebase-hooks

React Hooks for Firebase.
Apache License 2.0
3.55k stars 304 forks source link

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

Open feelforyou opened 10 months ago

feelforyou commented 10 months ago

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 6 months ago

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 3 months ago

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