Fetch firestore document from document id in array field and display in React

Question

I have 2 collections on firestore, boxes contains a field shoes that is an array of reference id to the shoes collections :

My Boxes component is fetching all boxes and displaying their number. I also want to display properties of the shoes in it, like a photo. So I go about like that:

Boxes.jsx

 // DEPENDENCIES import React, { useEffect, useContext } from 'react'; // COMPONENTS import BoxCard from '../Components/BoxCard'; // CONTEXT import ShoesContext from '../Contexts/ShoesContext'; // HELPERS import db from '../config/firebase'; let initialBoxes = []; const Boxes = () => { const { boxes, setBoxes } = useContext(ShoesContext); useEffect(() => { initialBoxes = []; db.collection('boxes') .get() .then(querySnapshot => { querySnapshot.forEach(doc => { initialBoxes.push(doc); }); setBoxes(initialBoxes); }); }, []); return ( <div> <h3>You have {boxes.length} boxes:</h3> {!boxes ? ( <div>Loading..</div> ) : ( boxes.map(box => { return <BoxCard box={box} key={box.id} />; }) )} </div> ); }; export default Boxes;

Boxes.jsx

 import React from 'react'; import TestComponent from './TestComponent'; const BoxCard = ({ box }) => { const theBox = box.data(); return ( <div> <h5> Box number {theBox.number} has {theBox.shoes.length} shoes:{' '} </h5> {theBox.shoes.map(shoe => { return <TestComponent shoe={shoe} />; })} </div> ); }; export default BoxCard;

and this is where it all breaks:

 import React from 'react'; const TestComponent = ({ shoe }) => { useEffect(() => { let hell; shoe.get().then(doc => { hell = doc.data(); }); }, []); return <div>{hell ? hell.season : 'loading...'}</div>; }; export default TestComponent;

hell is undefined. I have not found a way to render the nested docs so I can use them in my TestComponent component. My extensive research online has not been succesful so far, hence my question today.

Thanks!

Update:

I seem to have found the answer, answer from Josh below put me on the right track. See below code for TestComponent.jsx :

 import React, { useEffect, useState } from 'react'; // HELPERS import db from '../config/firebase'; const TestComponent = ({ shoe }) => { const [hell, setHell] = useState(); useEffect(() => { db.collection('shoes') .doc(shoe.id) .get() .then(doc => { setHell(doc.data()); }); }, []); return <div>{hell ? hell.season : 'loading...'}</div>; }; export default TestComponent;

Answer 1

What is shoe in shoe.get()... in the TestComponent? Shouldn't it be db.doc(shoe).get()... .