React/Firebase加载卡片图片时的渲染优化方案咨询

我正尝试从Firebase Firestore加载卡片集合，并通过Firebase Storage加载卡片图片。但使用componentWillMount加载卡片时，图片无法显示——推测是函数在图片URL加载完成前就返回了卡片对象，必须点击左右按钮重新渲染才能正常显示。试了多种方案都没解决，想请教如何实现卡片（包含图片）一次性正确加载，无需二次渲染。

相关代码 #

export async function getAllIDs(){
  const q = query(collection(db, "Books"));
  const querySnapshot = await getDocs(q);
  let array= [];
  let it=0;
   querySnapshot.forEach((doc) => {
    var data = {};

    data.id=doc.id;
    data.Title=doc.data().Title;
    data.Summary=doc.data().Summary;
    data.Image=doc.data().Image;
    array[it]=data;
    it++;
    console.log(data);
  
  getDownloadURL(ref(storageRef, doc.data().Image))
  .then((url) => {
  // Or inserted into an <img> element
    console.log(url);
    data.url=url;
    
    });
  });
  console.log(array);
  return array;

}

效果对比 #

• 渲染前：卡片仅显示文字内容，图片区域为空
• 渲染后：卡片文字和图片均正常显示

问题核心是**getDownloadURL是异步操作，但你没等它完成就返回了数组**，导致首次渲染时卡片对象里的url属性还没赋值，自然加载不出图片。

修复代码 #

把forEach换成map，用Promise.all等待所有图片URL加载完成，同时用await替代.then来控制异步流程：

export async function getAllIDs(){
  const q = query(collection(db, "Books"));
  const querySnapshot = await getDocs(q);
  
  // 遍历每个文档，返回包含图片URL的Promise
  const cardPromises = querySnapshot.docs.map(async (doc) => {
    const docData = doc.data();
    // 等待图片下载地址获取完成
    const imageUrl = await getDownloadURL(ref(storageRef, docData.Image));
    
    return {
      id: doc.id,
      Title: docData.Title,
      Summary: docData.Summary,
      Image: docData.Image,
      url: imageUrl
    };
  });
  
  // 等待所有卡片的图片URL都获取完成后，再返回完整数组
  const cards = await Promise.all(cardPromises);
  console.log(cards);
  return cards;
}

额外提示 #

• 别再用componentWillMount了，这个生命周期钩子已经被废弃，类组件推荐用componentDidMount，函数组件用useEffect来发起数据请求。
• 如果是函数组件，调用getAllIDs时要配合useState存数据：请求完成后再更新状态，触发组件一次性渲染出所有带图片的卡片。

内容的提问来源于stack exchange，提问作者rexod3