类型错误： 无法读取未定义的属性(读取"ref")

Question

我创建了一个linkedIN，唯一不工作的是当我试图发布内容时，它说:

TypeError: Cannot read properties of undefined (reading 'ref')

Firebase版本如下

• 重火力点:^ 9.1.2,
• firebase-tools: ^ 9.20.0,

我在firebase面临问题"ref"

下面是firebase配置

firebase.js

//import { firebase } from "firebase";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "**********************",
authDomain: "*********************",
projectId: "************************",
storageBucket: "*********************",
messagingSenderId: "*********************",
appId: "***********************************",
};

//loading firebase configuration
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();`enter code here`
const provider = new firebase.auth.GoogleAuthProvider();
const storage = firebase.storage; //to store images
export { auth, provider, storage };
export default db;

这个功能有登录在哪里，当我点击POST按钮，它张贴在LinkedIN应用程序的内容，我创建(假)

index.js

import { auth, provider, storage } from "../firebase";
export function postArticleApi(payload) {
return (dispatch) => {
if (payload.image != "") {
const upload = storage
**.ref**(`images/${payload.image.name}`)

当我点击POST按钮时，它在浏览器上给出以下错误:

TypeError: Cannot read properties of undefined (reading 'ref')
export function postArticleApi(payload) {
48 |   return (dispatch) => {
49 |     if (payload.image != "") {
> 50 |       const upload = storage
51 |         .ref(`images/${payload.image.name}`)
52 |         .put(payload.image);
53 |       upload.on(

你可以在第50行看到错误被指向。如有任何帮助，不胜感激

Answer 1

您正在尝试使用firebase.storage，但您从未将其导入firebase.js，其中仅包含:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

要解决这个问题，还可以在firebase.js中导入存储:

import 'firebase/compat/storage';

然后初始化它(仍然在firebase.js):

const storage = firebase.storage();