Firebase Storage权限错误无法完全捕获致应用崩溃求助

问题背景 #

使用React + TypeScript + Firebase开发，实现了storageService.ts中的uploadFile/deleteFile函数，以及调用该函数的文件上传组件。正常权限下上传功能正常，但触发Firebase Storage权限错误时，尽管在函数和组件中都用了try-catch，仍出现未捕获的Promise错误：

Uncaught (in promise) FirebaseError: Firebase Storage: User does not have permission to access...

最终导致应用崩溃。

核心原因分析 #

Firebase Storage的uploadBytesResumable返回的UploadTask是一个带状态监听的异步任务，错误可能来自多个环节：

• 上传任务本身的权限校验错误
• 进度监听回调中的代码错误
• 上传完成后获取下载URL的异步操作错误

如果这些环节的错误没有被完整捕获并通过Promise传递，就会出现未捕获的Promise异常。

具体解决方案 #

1. 完善uploadFile函数的错误捕获逻辑 #

确保上传任务的所有异步环节错误都被捕获，并通过Promise的reject传递出去：

// storageService.ts
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

export const uploadFile = async (file: File, storagePath: string): Promise<string> => {
  const storage = getStorage();
  const storageRef = ref(storage, storagePath);
  const uploadTask = uploadBytesResumable(storageRef, file);

  return new Promise((resolve, reject) => {
    // 监听上传状态变化
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        // 进度处理逻辑需包裹try-catch，避免进度计算出错导致未捕获错误
        try {
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log(`上传进度：${progress}%`);
        } catch (err) {
          reject(err);
        }
      },
      // 上传任务的错误回调，直接reject错误
      (error) => reject(error),
      // 上传完成后获取下载URL，需捕获该异步操作的错误
      async () => {
        try {
          const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
          resolve(downloadURL);
        } catch (err) {
          reject(err);
        }
      }
    );
  });
};

2. 组件中完整处理Promise错误 #

调用uploadFile时，确保用async/await配合try-catch包裹，或者通过.catch()链式处理所有错误分支：

// file-upload-progress.component.tsx
import { useState } from "react";
import { uploadFile } from "./storageService";

const FileUploadProgress = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleUpload = async () => {
    if (!selectedFile) return;

    try {
      const downloadUrl = await uploadFile(selectedFile, `uploads/${selectedFile.name}`);
      console.log("文件上传成功：", downloadUrl);
      // 后续成功逻辑（如更新状态、提示用户）
    } catch (error) {
      console.error("上传失败：", error);
      // 错误处理逻辑（如显示错误提示、重置状态）
    }
  };

  return (
    <div>
      <input
        type="file"
        onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
      />
      <button onClick={handleUpload} disabled={!selectedFile}>
        上传文件
      </button>
    </div>
  );
};

export default FileUploadProgress;

3. 添加全局未捕获Promise错误兜底 #

如果仍有遗漏的错误，可在应用入口添加全局监听，避免应用崩溃：

// index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

// 全局捕获未处理的Promise错误
window.addEventListener("unhandledrejection", (event) => {
  event.preventDefault(); // 阻止默认崩溃行为
  console.error("未处理的Promise错误：", event.reason);
  // 可添加全局错误提示（如弹出Toast）
});

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);

4. 验证错误触发环节 #

检查Firebase Storage安全规则的触发时机，有些权限错误可能在分块上传的中间阶段触发，此时需确保uploadTask.on的错误回调能正确捕获并传递错误。

总结 #

核心是确保Firebase Storage上传任务的所有异步操作错误都被捕获并通过Promise传递，同时组件中完整处理错误分支。全局兜底方案作为最后防线，优先从源头解决未捕获错误的问题。

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