Firebase Storage出现Uncaught TypeError及404错误求助

1. 修正Firebase Storage模块导入错误 #

浏览器无法解析裸模块标识符firebase/storage，需替换为对应版本的CDN链接，和其他Firebase模块保持版本一致：

// 替换原storage导入语句
import { getStorage, ref as storageRef, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js";

2. 解决Storage引用命名冲突 #

你同时导入了Firebase Database和Storage的ref方法，需使用别名storageRef创建Storage引用，避免和Database的ref混淆：

// 在listUserInfo函数中替换原imageRef创建代码
const imageRef = storageRef(storage, filePath); // 用storageRef而非ref

3. 移除无效的图片链接调用 #

listUserInfo中你错误地将Storage引用对象直接传给changeUserImage，这不是有效URL，需删除这行冗余代码：

// 删除该行代码
changeUserImage(userIMGLink);

4. 排查404错误的额外要点 #

• 核对文件路径：确认Firebase Storage中文件确实存放在users/[userID].jpg路径下，注意文件名大小写、后缀是否完全匹配（比如是.jpg还是.jpeg）
• 调整Storage安全规则：若当前未做用户认证，测试阶段可临时放宽规则（上线后需改回安全规则）：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /{allPaths=**} {
        allow read: if true; // 测试用，上线后替换为认证校验规则
        allow write: if request.auth != null;
      }
    }
  }
  

• 处理URL获取失败场景：在catch块中设置默认图片，避免页面无图片显示：

  catch (error) {
    console.error("Error getting download URL:", error);
    // 替换为你的默认图片路径
    changeUserImage("path/to/default-image.jpg");
  }
  

修复后的核心代码片段 #

// 修正后的导入语句
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js";
import { getStorage, ref as storageRef, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js";

// 初始化代码不变
const appSettings = {
    databaseURL: "https://mobilelibattendance-default-rtdb.asia-southeast1.firebasedatabase.app/"
}
const app = initializeApp(appSettings);
const database = getDatabase(app);
const attendanceDB = ref(database, "users");
const storage = getStorage(app);

// DOM元素获取代码不变
const userIMG = document.getElementById("profile");
const IDNum = document.getElementById("IDNum");
const fullName = document.getElementById("fullName");
const fullBirthday = document.getElementById("fullBirthday");
const sex = document.getElementById("sex");
const street = document.getElementById("street");
const exp = document.getElementById("exp");
const cityProvince = document.getElementById("cityProvince");

// 数据库监听代码不变
onValue(attendanceDB, function(snapshot) {
    let scannedID="CNPL0987654321";
    if (snapshot.exists()){
        let usersArray = Object.entries(snapshot.val());
        for (let i = 0;i<usersArray.length;i++) {
        let allUsers = usersArray[i];
        let userID = allUsers[0];
        let userInfo = allUsers[1];
        if (userID == scannedID){
            listUserInfo(scannedID, userInfo);
        }
    }
    }else {
        fullName.innerHTML="No user...";
    }
})

// 修正后的listUserInfo函数
async function listUserInfo(userID, userInfo) {
    console.log(userInfo);
    let fullname = userInfo.firstname + " " + userInfo.lastname;
    let birthdate = userInfo.birthmonth + " " + userInfo.birthday + ", " + userInfo.birthyear;
    const filename = userID + ".jpg";
    const filePath = `users/${filename}`;
    const imageRef = storageRef(storage, filePath);

    try {
        const url = await getDownloadURL(imageRef);
        changeUserImage(url);
    } catch (error) {
        console.error("Error getting download URL:", error);
        changeUserImage("default-image.jpg");
    }

    IDNum.innerHTML=userID;
    fullName.innerHTML=fullname;
    fullBirthday.innerHTML=birthdate;
    sex.innerHTML=userInfo.sex;
    street.innerHTML =userInfo.street;
    exp.innerHTML =userInfo.exp;
    cityProvince.innerHTML =userInfo.cityProvince;
}

// 图片更新函数不变
function changeUserImage(userIMGLink) {
    userIMG.src = userIMGLink;
    console.log(userIMGLink);
}

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