React项目中Firebase Storage图片URL可打印但页面不显示

核心问题分析 #

1. 异步操作未正确等待：getPhotoArray中getDownloadURL是异步Promise，你在forEach循环后直接调用setPhotos(images)时，所有异步请求还未完成，images数组仍为空。后续异步请求完成后修改数组，但React不会因数组原地修改触发重渲染，且setPhotos已提前执行旧的空数组。
2. 图片src属性绑定错误：渲染时src="photo"是固定字符串，而非遍历得到的photo变量，导致图片路径完全错误。

修复代码 #

1. 修正getPhotoArray的异步逻辑 #

改用Promise.all等待所有图片URL请求完成后再更新状态：

export const getPhotoArray = async (selectedDonation, setPhotos) => {
  const listRef = ref(storage, '/Images/' + selectedDonation.id);
  try {
    const res = await listAll(listRef);
    if (res.items.length > 0) {
      // 收集所有getDownloadURL的Promise实例
      const urlPromises = res.items.map(itemRef => 
        getDownloadURL(ref(storage, itemRef.fullPath))
      );
      // 等待所有异步请求完成，获取完整URL数组
      const images = await Promise.all(urlPromises);
      setPhotos(images);
      console.log(images);
    } else {
      toast.info('No Photos Found, Please Try Again Later');
    }
  } catch (error) {
    console.error('获取图片失败:', error);
  }
}

2. 修正组件中的图片渲染逻辑 #

• 将src="photo"改为src={photo}，绑定正确的URL变量
• 移除不必要的useMemo（无性能问题时无需使用）：

import React, { useEffect, useState } from 'react'
import './donation_information.css'
import { getReceiptURL, getPhotoArray } from '../../API/FirestoreAPI' 

export default function DonationInformation({ selectedDonation, selectedDonationSteps }) {
  const [Photos, setPhotos] = useState([]);
  // 补充缺失的URL状态定义
  const [URL, setURL] = useState('');
 
  const getPhotos = () => {
    getPhotoArray(selectedDonation, setPhotos);
  }

  useEffect(() => {
    setURL('');
    setPhotos([]);
  }, [selectedDonation]);

  return (
    <div className='donationInformation'>
      <div className='download-photos'>
        <button onClick={getPhotos}>Show Photos</button>
        {/* 直接遍历渲染图片 */}
        {Photos.map((photo) => (
          <img src={photo} key={photo} alt="捐赠图片" />
        ))}
      </div>
    </div>
  )
}

额外说明 #

• 若需用useMemo优化大数组渲染性能，需确保其返回map结果：

{useMemo(() => 
  Photos.map((photo) => (
    <img src={photo} key={photo} alt="捐赠图片" />
  )), 
[Photos])}

• 原代码中setURL('')需确保已定义对应状态，否则会触发报错。

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