how do you find a document by its ID in react?
I'm trying to get each of the document specific ids in my collection in Firestore, but I can't find a way to do it so I can access the properties in the collection so I can properly render my components
[ItemDetailContainer.js]
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import ItemDetail from "../ItemDetail/ItemDetail";
import { PRODUCTS } from "../ItemListContainer/Products";
import Spinner from "../ItemListContainer/Spinner";
import firebase, { db } from "../../index";
import { getDoc, doc, addDoc } from "firebase/firestore";
const ItemDetailContainer = () => {
const [jackets, setJackets] = useState([]);
const [producto, setProducto] = useState({});
const { id } = useParams();
useEffect(() => {
const singleItem = doc(db, "Products", "YPQGY4euFdaUcCoDm06C");
getDoc(singleItem).then((rta) => {
console.log(rta.data());
console.log(rta.id);
setProducto({ ...rta.data(), id: rta.id });
});
}, []);
console.log(producto);
return (
<>
<div>
{producto.id ? (
<>
<ItemDetail producto={producto} />
</>
) : (
<div>
<Spinner />
</div>
)}
</div>
</>
);
};
export default ItemDetailContainer;
You can use in operator in a query that combines up to 10 equality (==) clauses on the same field with a logical OR and then use getDocs() to get all matching documents:
import { query, where, collection, documentId } from "firebase/firestore";
const colRef = collection(db, "Products");
const q = query(colRef, where(documentId(), 'in', ['docId1', 'docId2']));
getDocs(q).then((snap) => {
console.log(snap.docs.map(d => ({ id: d.id, ...d.data() }))
})
If you have an array of more than 10 IDs then you can individually query the documents.