Firebase v9调用storage.ref报Cannot read properties of undefined错误如何解决

根因分析 #

你遇到的TypeError: Cannot read properties of undefined (reading 'ref')错误有两个直接诱因：

• 未在Firebase配置文件中引入Storage的兼容版本依赖，导致Firebase实例未挂载storage相关能力
• Storage初始化语法错误，未正确生成可用的Storage实例

修复步骤 #

1. 补充Storage兼容包导入 #

修改firebase.js中的导入代码，新增Storage的compat包引入：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
// 新增以下行导入Storage兼容包
import 'firebase/compat/storage';

2. 修正Storage初始化逻辑 #

将firebase.js中原来的Storage初始化代码：

const storage = firebase.storage; //用于存储图片

修改为：

// 从初始化完成的Firebase实例生成Storage实例
const storage = firebaseApp.storage();

额外验证项 #

修复后如果仍有异常，可以先排查以下配置：

• 确认Firebase控制台中已开启Cloud Storage服务
• 确认Storage安全规则已放开对应目录的读写权限，可先使用测试规则验证功能可用性

内容的提问来源于stack exchange，提问作者Krishna Jamadar