Firebase Storage图片下载报错：ReferenceError与对象不存在问题

报错原因分析 #

两类错误的明确诱因：

1. ReferenceError: Property 'images' doesn't exist：getMyImage函数末尾尝试返回未定义的images变量，属于无意义的错误返回
2. FirebaseError: Object '[userId]/image.jpeg' does not exist：上传与下载的文件路径不匹配——上传时存储路径为${userId}/image，但下载时请求的是${userId}/image.jpeg，导致找不到目标文件

分步修复方案 #

1. 修正存储路径匹配问题 #

在saveImage函数中，将上传的文件路径调整为与下载请求一致的${userId}/image.jpeg：

// 原错误路径
const mountainsRef = ref(storage, `${userId}/image`);
// 修改为正确路径
const mountainsRef = ref(storage, `${userId}/image.jpeg`);

2. 重构getMyImage异步逻辑并移除无效返回 #

移除未定义的images返回值，统一使用async/await简化异步逻辑，同时按需返回下载URL或Blob对象：

修改后的完整代码 #

saveImage函数 #

export const saveImage = async (userData, userId) => {
  try {
    const imageUri = userData.image;
    const mountainsRef = ref(storage, `${userId}/image.jpeg`);
    const response = await fetch(imageUri);
    const blob = await response.blob();
    const snapshot = await uploadBytes(mountainsRef, blob);
    console.log("画像をStorageにアップロードしました。", snapshot);

    const downloadURL = await getDownloadURL(mountainsRef);
    console.log('Download URL: ', downloadURL);

    const userDocRef = doc(firestore, `users/${userId}`);
    await setDoc(userDocRef, { imageUrl: downloadURL }, { merge: true });

    console.log("Firestoreに画像URLを保存しました。");
  } catch (e) {
    console.error("画像保存エラー: ", e);
  } finally {
    console.log("saveImage処理完了");
  }
};

getMyImage函数（返回URL与Blob） #

export const getMyImage = async (userId) => {
  try {
    const storageRef = ref(storage, `${userId}/image.jpeg`);
    const downloadURL = await getDownloadURL(storageRef);
    console.log("画像URL取得成功: ", downloadURL);

    // 按需获取Blob对象
    const response = await fetch(downloadURL);
    const blob = await response.blob();
    console.log("画像Blob取得成功");

    return { url: downloadURL, blob: blob };
  } catch (error) {
    console.error("getMyImageエラー: ", error);
    throw error;
  }
};

额外优化建议 #

• 上传完成后，可到Firebase控制台的Storage面板确认文件路径，确保与下载请求路径完全一致
• 既然已将下载URL保存至Firestore，后续可直接从Firestore读取imageUrl，无需重复调用getDownloadURL，提升请求效率

内容的提问来源于stack exchange，提问作者谷口祐人