Firebase9 Storage TS报错：类型'Promise<UploadResult>'不存在属性'on'怎么解决

问题原因 #

你使用了错误的上传API导致类型不匹配：

• uploadBytes 方法返回的是 Promise<UploadResult> 类型，本身仅会返回上传完成后的结果，没有提供事件监听的on方法，仅适合不需要跟踪上传进度的场景
• 如果需要监听上传进度、状态变化，必须使用 uploadBytesResumable 方法，该方法返回的 UploadTask 类型才支持.on事件监听

解决方案 #

第一步：调整API导入 #

从firebase/storage中新增导入uploadBytesResumable方法和对应的TS类型：

import { ref as storageRef, uploadBytesResumable, type UploadTaskSnapshot } from "firebase/storage";

第二步：替换上传逻辑 #

把原来的uploadBytes调用替换为uploadBytesResumable，同时可以补充常用的响应式状态方便外部使用，完整修正后的代码如下：

import { projectStorage } from "@/firebase/config";
import { ref, watchEffect } from "vue";
import { ref as storageRef, uploadBytesResumable, type UploadTaskSnapshot } from "firebase/storage";

const useStorage = (file: File) => {
  // 对外暴露的响应式状态，可根据业务需要调整
  const uploadProgress = ref<number>(0)
  const uploadError = ref<Error | null>(null)
  const downloadUrl = ref<string | null>(null)

  watchEffect(() => {
    const storageReference = storageRef(projectStorage, "images/" + file.name);
    // 使用支持进度监听的断点续传上传方法
    const uploadTask = uploadBytesResumable(storageReference, file);
    
    // 监听上传状态变化
    uploadTask.on("state_changed", 
      (snapshot: UploadTaskSnapshot) => {
        // 计算实时上传进度
        uploadProgress.value = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100)
      },
      (error) => {
        uploadError.value = error
      },
      async () => {
        // 上传完成后获取文件下载地址
        downloadUrl.value = await uploadTask.snapshot.ref.getDownloadURL()
      }
    );
  });

  return { uploadProgress, uploadError, downloadUrl }
};
export default useStorage;

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