使用Angularfire 18.0.1调用getBlob()报错：仅支持类浏览器环境

错误原因 #

getBlob()方法依赖浏览器原生的Blob API，当代码在非浏览器环境（比如Angular Universal服务端渲染、Node.js后台）执行时，就会抛出该错误。即使在浏览器环境中，若未区分服务端/客户端执行逻辑，也可能触发此问题。

解决方案 #

1. 限定getBlob()仅在浏览器环境执行 #

使用Angular的isPlatformBrowser工具，确保相关代码只在客户端运行：

import { Storage, getBlob, ref } from '@angular/fire/storage';
import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

constructor(
  private storage: Storage,
  @Inject(PLATFORM_ID) private platformId: Object
) {}

async ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    const eventsRef = ref(this.storage, 'events');
    const blob = await getBlob(eventsRef);
    // 处理获取到的blob数据
  }
}

2. 非浏览器环境替换为兼容方法 #

如果需要在服务端或Node.js环境获取存储数据，可改用以下兼容方法：

• 使用getBytes()获取字节数组（全环境兼容）：

async ngOnInit() {
  const eventsRef = ref(this.storage, 'events');
  const bytes = await getBytes(eventsRef);
  // 仅在浏览器端将字节数组转为Blob
  if (isPlatformBrowser(this.platformId)) {
    const blob = new Blob([bytes]);
  }
}

• 使用getDownloadURL()获取文件链接，再通过HTTP请求获取数据：

import { HttpClient } from '@angular/common/http';

constructor(private storage: Storage, private http: HttpClient) {}

async ngOnInit() {
  const eventsRef = ref(this.storage, 'events');
  const url = await getDownloadURL(eventsRef);
  const blob = await this.http.get(url, { responseType: 'blob' }).toPromise();
}

3. 确认AngularFireStorage配置正确性 #

确保在根模块中正确导入并配置AngularFireStorage：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule
  ]
})
export class AppModule {}

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