JS上传图片至Firebase Storage后无法获取下载URL如何解决

你的判断是对的，uploadBytesResumable 上传完成返回的快照对象本身不直接包含下载URL字段，URL需要单独调用接口获取。你拿不到URL是代码存在三处错误：

• 定义了getData函数包裹取URL的逻辑，但从未调用该函数，内部代码完全不会执行
• getDownloadURL是异步Promise操作，你在Promise回调外立刻打印ProPicUrl，此时URL还未完成赋值，打印结果必然是undefined
• 模块化v9及以上版本的Firebase SDK中，getDownloadURL是独立导出的方法，需要传入存储引用调用，并非挂载在上传快照对象上的方法

首先确保你已经从firebase/storage导入了getDownloadURL方法，之后调整上传回调的逻辑，去掉无效的函数定义，等异步返回URL后再执行后续的存库、渲染逻辑。
修复后的完整代码如下：

// 顶部导入依赖，如果你已经导入过其他方法，把getDownloadURL加进去即可
// import { getStorage, ref as sRef, uploadBytesResumable, getDownloadURL } from "firebase/storage";

Upload.addEventListener('click', (e) =>{
    let ImSRC = files[0];
    
    if(ImSRC == null ){
        alert('no picture selected');
        return;
    }

    const metdata = {
        contentType: ImSRC.type
    }
    const storeref = sRef(storage,"UsersProPic/" + cUserID);
    const uploadTask = uploadBytesResumable(storeref, ImSRC, metdata);

    uploadTask.then(async (snapshot)=>{
        console.log('上传完成快照：', snapshot);
        // 传入对应文件的存储引用获取下载URL
        const ProPicUrl = await getDownloadURL(storeref);
        console.log('获取到的图片访问URL：', ProPicUrl);
        // 所有需要用到ProPicUrl的逻辑（比如写入数据库、渲染页面）都要写在这里
    }).catch(err => {
        console.error('上传或获取URL失败：', err);
    });
});

如果需要实现上传进度条，可以给uploadTask绑定state_changed事件监听，进度监听逻辑不会影响后续URL获取。

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