Angular7集成Firebase Storage遇报错及代码正确性咨询

嗨，我来帮你搞定这个问题！咱们一步步来：

一、先搞定CLI的警告 #

你看到的那些警告，根源是导入路径完全错了：你从firebase/firestore导入firebase，但firebase/firestore是Firestore数据库的模块，它根本没有默认导出firebase对象，而且你要的是Storage功能，完全不需要碰这个模块。

修正方法： #

1. 打开app.component.ts，直接删掉这行错误的导入：

import firebase from 'firebase/firestore';

2. 如果之后确实需要用原生Firebase API（其实更推荐用AngularFire封装好的服务），换成正确的导入：

import * as firebase from 'firebase/app';
// 必须导入Storage模块，不然用不了storage功能
import 'firebase/storage';

二、修正获取图片下载链接的代码 #

你的原生Firebase代码写法有问题，而且既然已经注入了AngularFireStorage服务，咱们直接用它会更顺手，也更符合Angular的开发模式。

推荐方案：用AngularFireStorage #

修改app.component.ts里的display方法：

display() {
  // 用AngularFireStorage的ref方法拿到存储引用
  this.afStorage.ref('rasool/download2.jpg').getDownloadURL()
    .subscribe(
      url => console.log('图片下载链接:', url),
      error => console.error('获取链接失败:', error)
    );
}

备选方案：坚持用原生Firebase API #

如果你偏爱原生写法，修正后的代码应该是这样（注意firebase.storage()是调用函数拿实例，再调用ref）：

// 先确保导入正确
import * as firebase from 'firebase/app';
import 'firebase/storage';

// ...其他代码

display() {
  const storageRef = firebase.storage().ref('rasool/download2.jpg');
  storageRef.getDownloadURL()
    .then(url => console.log('图片下载链接:', url))
    .catch(error => console.error('获取链接失败:', error));
}

三、你的原代码哪里错了？ #

你原来的这行代码是核心错误：

this.storageRef = firebase.storage.ref('rasool/download2.jpg');

• 问题：firebase.storage是一个函数，得先调用它firebase.storage()拿到Storage实例，才能调用ref方法，正确写法是firebase.storage().ref('rasool/download2.jpg')。

另外，你代码里的firestore = firebase.storage();完全多余，根本没用到，直接删掉就行。

四、最后要检查的点 #

1. 确认你的Firebase配置config是对的，里面要有Storage相关的配置项。
2. 确认Firebase Storage里确实存在rasool/download2.jpg这个文件，而且项目的Storage规则允许读取它（测试阶段可以临时设为公开读取，生产环境一定要严格控制权限）。

内容的提问来源于stack exchange，提问作者Rasool ALmusawie