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

Posted 2023-03-16

【中文标题】尝试通过反应上传到 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;

【参考方案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 查看更新。