尝试通过反应上传到 Firebase 存储。 TypeError：无法读取未定义的属性（读取'ref'）答案

【问题标题】：Trying to upload to firebase storage with react. TypeError: Cannot read properties of undefined (reading 'ref')尝试通过反应上传到 Firebase 存储。 TypeError：无法读取未定义的属性（读取'ref'）
【发布时间】：2022-01-07 14:04:02
【问题描述】：

这是下面的代码。控制台日志告诉我它正在正确读取图像，但 firebase.storage 由于某种原因未定义。

import React from 'react';
import firebase from 'firebase/compat/app';
import "firebase/storage";

function ProfilePic() {


    const [image , setImage] = React.useState('');

    const upload = ()=>{
    if (image == null) return;
        console.log(image);
        const ref = firebase.storage.ref(`images/${image.name}`);
        ref.put(image).on("state_changed" , alert("success") , alert);
        
    }
  
  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;

【问题讨论】：

标签： reactjs firebase storage typeerror

【解决方案1】：

您需要导入旧的命名空间库才能按照您的预期使用它。

import "firebase/compat/storage";

通过使用"firebase/storage"，您最终会改为导入现代模块化 SDK。

您还需要使用调用firebase.storage() 来获取其实例而不是命名空间：

const ref = firebase.storage().ref(`images/${image.name}`);

【讨论】：

然后我得到错误：TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_2__.default.storage.ref is not a function
@Kris 查看更新。