Next.js应用获取Firebase Storage文件URL出现XMLHttpRequest ReferenceError

• Firebase 8.x版本的Storage客户端SDK默认是为浏览器环境设计的，依赖浏览器原生API XMLHttpRequest，而Next.js的getStaticProps、getServerSideProps等方法是运行在Node.js服务端环境的，Node.js原生没有提供XMLHttpRequest实现，所以调用时会抛出对应错误。
• 首次调用正常、刷新/路由切换后崩溃的现象，是因为首次加载大概率走客户端侧渲染，调用逻辑运行在浏览器环境，后续操作触发了服务端侧的执行逻辑才会触发报错。

方案1：仅在客户端调用Storage相关方法（优先推荐） #

获取图片下载URL本身是供客户端使用的逻辑，无需在服务端执行，可通过环境判断或客户端生命周期钩子限制执行范围：

1. 给原函数增加环境判断逻辑

import firebase from "firebase/app";
import "firebase/storage";

export const getImgUrl = async () => {
  // 非浏览器环境直接返回，避免触发服务端执行报错
  if (typeof window === 'undefined') return
  const storage = firebase.storage();
  const pathReference = storage.ref("user_uploads/my_image.jpg");

  pathReference
    .getDownloadURL()
    .then((url) => {
      console.log("my url", url);
    })
    .catch((error) => {
      console.error("error", error);
    }); 
};

2. 组件内调用时配合useEffect（React的useEffect本身仅在客户端执行）

import { useEffect } from 'react'

function DemoComponent() {
  useEffect(() => {
    getImgUrl()
  }, [])
  // 其余组件逻辑
}

如果之前是在getStaticProps中调用该函数，直接把这部分逻辑迁移到客户端组件内用useEffect触发即可。

方案2：给Node环境补XMLHttpRequest实现（仅适用于必须在服务端调用的场景） #

如果确实有服务端获取Storage下载地址的需求，可以给Node环境安装对应polyfill：

1. 安装依赖

npm install xmlhttprequest

2. 在Firebase初始化文件的最顶部注入polyfill

if (typeof window === 'undefined') {
  global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
}
// 下方写原有Firebase初始化逻辑

方案3：服务端逻辑改用Firebase Admin SDK #

如果服务端有大量Firebase相关操作，更推荐使用专门适配Node.js环境的Firebase Admin SDK操作Storage，没有浏览器API依赖问题，权限控制也更安全。

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