如何在Next.js中从Firebase Storage下载图片？求解决方案

现有代码的潜在问题 #

你的当前实现存在几个适配Next.js环境的问题：

• 直接操作document会在Next.js服务端渲染（SSR/SSG）时抛出错误，因为服务端无DOM环境
• 文件名硬编码，无法自动获取存储在Firebase中的原始文件名
• 部分浏览器可能因跨域策略拦截下载请求

优化后的实现方案 #

以下是适配Next.js环境的完整代码，解决上述问题：

'use client'; // Next.js 13+ 必须添加，确保代码在客户端执行

import { ref, getDownloadURL, getMetadata } from "firebase/storage";
import { storage } from "@/lib/firebase"; // 替换为你的Firebase Storage实例路径

const handleDownload = async (filePath: string) => {
  try {
    const storageRef = ref(storage, filePath);
    
    // 并行获取下载链接与文件元数据
    const [downloadURL, metadata] = await Promise.all([
      getDownloadURL(storageRef),
      getMetadata(storageRef)
    ]);

    // 仅在客户端环境下执行DOM操作
    if (typeof window !== 'undefined') {
      const downloadLink = document.createElement("a");
      downloadLink.href = downloadURL;
      // 使用Firebase存储的原始文件名，兼容 fallback 默认值
      downloadLink.download = metadata.name || "downloaded-image.jpg";
      // 触发下载后自动清理DOM元素
      document.body.appendChild(downloadLink);
      downloadLink.click();
      setTimeout(() => document.body.removeChild(downloadLink), 100);
    }
  } catch (error) {
    console.error("下载文件失败:", error);
    // 可在此添加用户友好的错误提示（如弹窗/Toast）
  }
};

关键注意事项 #

• 客户端组件强制声明：Next.js服务端组件无法访问浏览器API，必须通过'use client'标记组件为客户端执行
• 权限配置：确保Firebase Storage中的文件设置了正确的下载权限，私有文件需先完成用户身份验证
• 跨域规则配置：若浏览器拦截下载请求，需在Firebase控制台为Storage配置CORS规则，允许你的Next.js域名访问
• 文件名自动填充：通过getMetadata获取文件原始名称，提升用户体验

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