React上传Firebase Storage报错：Cannot read properties of undefined (reading 'ref')

开发者阿泽

2026-9-24

错误原因

导入路径不匹配：你使用了firebase/compat/app兼容版本的核心API，但Storage模块导入的是非兼容版本路径，导致storage方法没有挂载到全局firebase实例上
调用语法错误：firebase.storage是初始化方法，需要添加括号执行后才能拿到Storage实例，实例才具备ref方法，你直接访问firebase.storage.ref相当于从方法对象上读取不存在的ref属性，自然抛出undefined错误
回调逻辑错误：on("state_changed")的第二个参数要求传入回调函数，你直接写alert("success")会在代码执行时立即触发弹窗，而非上传成功后执行

修复代码

import React from 'react';
import firebase from 'firebase/compat/app';
// 修正为compat版本的Storage导入
import "firebase/compat/storage";

function ProfilePic() {
    // 初始值改为null，和后续判空逻辑匹配
    const [image, setImage] = React.useState(null);

    const upload = () => {
        if (image == null) return;
        console.log(image);
        // 调用firebase.storage()获取实例后再取ref
        const ref = firebase.storage().ref(`images/${image.name}`);
        ref.put(image).on(
            "state_changed",
            // 上传成功后才执行alert
            () => alert("success"),
            // 错误回调传入错误信息
            (err) => alert(err.message)
        );
    }
  
  return (
    <div className="App">
      <center>
      <input type="file" onChange={(e) => setImage(e.target.files[0])}/>
      <button onClick={upload}>Upload</button>
      </center>
    </div>
  );
}

export default ProfilePic;