Javascript 如何将多个嵌套查询中的数据正确映射到所需对象。反应/火基

我正试图从Firebase Firestore映射出我的模式。我使用Flamelink作为无头CMS使事情变得更简单，但我面临一个限制

图像存储位置与我从模式中提取的数据是分开的。为了解决这个问题，我创建了一些嵌套查询来查找存储位置的正确路径并生成图像的URL。我需要将该图像URL放回受尊重的对象的某个位置

目前，它只是将其添加到整个数组中，而不是其中已有的对象。第一个控制台日志是按正确顺序的文件引用，第二个控制台日志是我需要输入到原始对象中的正确URL。然而，这些似乎顺序不正确。我对反应和ES6还比较陌生，所以我可能会把事情复杂化。基本上，我只想将第二个Console.log的输出放在每个对象各自位置的ThumbnailURL位置

我试图创建一个新的对象数组，并在前端映射它们，但是这会导致问题，因为它们不在同一个对象中

const storage = firebase.storage().ref('flamelink/media/sized/240/')

class ContentUpdates extends React.Component {
  constructor(){
    super();
    this.ref = firebase.firestore().collection('fl_content').where('_fl_meta_.schema', '==', 'collateral');
    this.unsubscribe = null;
    this.state = {
      collateral: [],
    }
  }

  onCollectionUpdate = (querySnapshot) => {
    const collateral = [];
    querySnapshot.forEach((doc) => {
      const { name, image, thumbnail, thumbnailURL, img} = doc.data();
      collateral.push({
        key: doc.id,
        doc, // DocumentSnapshot
        name,
        image,
        img,
        thumbnail: image[0].id,
        thumbnailURL: firebase.firestore().collection(`fl_files`).where(`id`, '==', `${image[0].id}`).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            const { file } = doc.data();
            console.log('this is in the correct order', `${file}`);
            storage.child(`${file}`).getDownloadURL().then((url) => {
              const fileurl = url
              console.log('this is the value I need mapped to thumbnailURL', fileurl)
              collateral.push({thumbnailURL: fileurl})
            })
          })
        })
      });
    });
    this.setState({
      collateral
    });
  }

  componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  }

我希望辅助资料中的每个对象都经过必要的查询，将fileurl返回到其受尊重的辅助资料对象

更新：我稍微清理了一下函数。现在的问题是，它要经过两个循环，不返回值，只返回一个承诺。然而，很接近解决这个问题。将很快更新

  onCollectionUpdate = (querySnapshot) => {
    const collateral = [];
    querySnapshot.forEach((doc) => {

      const { name, image, thumbnail, thumbnailURL, img} = doc.data();
      const thumbnailImg = this.getThumbnailUrl(image[0].id);

      let obj = {
        key: doc.id,
        doc, // DocumentSnapshot
        name,
        image,
        img,
        thumbnail: image[0].id,
        thumbnailURL: thumbnailImg
      }
      collateral.push(obj);
    });
    this.setState({
      collateral
    });
  }

  async getThumbnailUrl(imgRef) {
    console.log('your in', imgRef)
    let snapshot = await firebase.firestore().collection(`fl_files`).where(`id`, '==', imgRef).get();
    console.log(snapshot)
    let snapVal = snapshot.forEach( async(doc) => {
        const { file } = doc.data();
        console.log('this is in the correct order', `${file}`);
        let downloadURL = await storage.child(`${file}`).getDownloadURL()
        console.log('this is the value I need mapped to thumbnailURL', downloadURL)
        return downloadURL;
    })
    return snapVal;
  }

  componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  }