react-firebase-hooks icon indicating copy to clipboard operation
react-firebase-hooks copied to clipboard

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

Open feelforyou opened this issue 2 years ago • 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;

feelforyou avatar Aug 17 '23 08:08 feelforyou

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

tigerxy avatar Jan 02 '24 16:01 tigerxy

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

syuabov avatar Mar 16 '24 02:03 syuabov