React JS集成Firebase Storage遇报错：service storage is not available

在React项目中集成Firebase Storage时，遇到错误提示service storage is not available，已确认Firebase配置信息无误，且重新安装过firebase包，但问题仍存在。

报错截图显示核心错误信息为：service storage is not available

以下是我的Firebase配置文件代码：

import { initializeApp } from "firebase/app";
import { Auth, getAuth } from "firebase/auth";
import { Firestore, getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

// web app's Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

// Initialize Firebase
export const firebase = initializeApp(firebaseConfig);

// exports
export const auth: Auth = getAuth(firebase);
export const db: Firestore = getFirestore(firebase);
export const storage = getStorage(firebase);

解决方案 #

• 确认Firebase项目的Storage服务已启用
  登录Firebase控制台，进入对应项目，检查左侧菜单栏的「Storage」服务是否已开启。若未启用，需完成初始化配置（设置存储区域、默认安全规则）。

• 统一firebase包版本
  确保项目中安装的firebase包各模块版本完全一致，版本不匹配可能导致服务加载异常。执行以下命令重新安装统一版本：

  npm uninstall firebase
  npm install firebase@latest
  

• 验证环境变量加载正确性
  在配置文件中临时打印firebaseConfig.storageBucket，确认其值与Firebase控制台中存储桶的地址完全一致，避免环境变量未注入或拼写错误：

  console.log(firebaseConfig.storageBucket); // 检查输出值是否正确
  

• 检查存储桶名称格式
  Storage桶的标准格式为[项目ID].appspot.com，确认storageBucket的值符合该格式，无多余空格或字符。

• 确认初始化顺序
  确保getStorage是在initializeApp完成后调用的，避免应用未初始化就尝试获取Storage服务。

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