React集成Firebase时遇“firebase storage is not defined”错误求助

问题描述 #

开发需上传缩略图的注册页面时，Firebase Authentication功能正常，但调用Firebase Storage时触发**"firebase storage is not defined"**错误，相关配置代码如下：

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

const firebaseConfig = {
  apiKey: "AIzaSyDjltfm2KlCLu1wYpbKl5A9pnxGv_7dxMc",
  authDomain: "sunodojo.firebaseapp.com",
  projectId: "sunodojo",
  storageBucket: "sunodojo.appspot.com",
  messagingSenderId: "482721025907",
  appId: "1:482721025907:web:96cd2758994da9be01bf06"
};

// 初始化firebase
firebase.initializeApp(firebaseConfig)

// 初始化服务
const projectFirestore = firebase.firestore()
const projectAuth = firebase.auth()
const projectStorage = firebase.storage()

// 时间戳
const timestamp = firebase.firestore.Timestamp


export { projectFirestore, projectAuth, projectStorage, timestamp }

控制台错误提示：firebase storage is not defined

解决方法 #

1. 核对Firebase版本兼容性 #

Firebase v9+采用模块化API，与v8的命名空间模式不兼容，需根据版本调整代码：

• 若使用v9+版本，改用模块化导入方式：

  import { initializeApp } from "firebase/app";
  import { getFirestore, Timestamp } from "firebase/firestore";
  import { getAuth } from "firebase/auth";
  import { getStorage } from "firebase/storage";
  
  const firebaseConfig = {
    // 你的配置信息
  };
  
  const app = initializeApp(firebaseConfig);
  const projectFirestore = getFirestore(app);
  const projectAuth = getAuth(app);
  const projectStorage = getStorage(app);
  const timestamp = Timestamp;
  
  export { projectFirestore, projectAuth, projectStorage, timestamp };
  

• 若想保留v8写法，降级安装v8版本：

  npm install firebase@8.x
  # 或使用yarn
  yarn add firebase@8.x
  

2. 确认Storage模块导入正确 #

检查import 'firebase/storage'是否拼写无误，且该语句在firebase.initializeApp(firebaseConfig)之前执行，确保Storage模块被正确加载。

3. 检查组件中的导入方式 #

在使用Storage功能的组件中，需导入配置文件中导出的projectStorage，而非直接调用firebase.storage()：

import { projectStorage } from '../path/to/your/firebase/config-file'

// 示例：上传文件
const uploadFile = (file) => {
  const storageRef = projectStorage.ref(`thumbnails/${file.name}`);
  storageRef.put(file).then(snapshot => {
    console.log('文件上传完成');
  });
}

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