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

Question

I have 2 collections on firestore, boxes contains a field shoesthat 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()....