Извлечь документ пожарного хранилища из идентификатора документа в поле массива и отобразить в React

Question

У меня есть 2 коллекции в firestore, boxes содержит поле shoes, которое является массивом идентификатора ссылки на shoes collections:

Компонент My Boxes извлекает все ящики и отображает их количество. Я также хочу отобразить свойства обуви в нем, как на фотографии. Вот и я go примерно так:

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;

и вот где все это ломается:

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 не определено. Я не нашел способа визуализации вложенных документов, чтобы я мог использовать их в своем TestComponent компоненте. Мои обширные исследования в Интернете пока не увенчались успехом, поэтому мой вопрос сегодня.

Спасибо!

Обновление:

Кажется, я нашел ответ, ответ от Джо sh ниже поставил меня на правильный путь. См. Ниже код для 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

Что такое shoe в shoe.get()... в TestComponent? Разве это не должно быть db.doc(shoe).get()....