Angular TS+Firebase图片上传后无法获取Firebase返回ID求助

问题根源 #

你遇到的__zone_symbol__state和__zone_symbol__value是Zone.js包装Promise后的内部属性——因为你把整个Promise对象传给了Subject，Angular的Zone会自动包装异步操作，导致订阅时拿到的不是直接的ID，而是被Zone包装的Promise结果。直接依赖这些内部属性既不优雅也不安全，一旦Zone版本更新可能会失效。

修正步骤 #

1. 修复服务中的setVenuePhoto方法

首先，确保你正确初始化viewUploadSubject，并在文档添加完成后直接把ID通过Subject发送出去，而不是发送Promise对象：

// 服务类中初始化私有Subject，避免外部随意操作
private viewUploadSubject = new Subject<string>();

setVenuePhoto(venue: any, photo: File): Observable<string> {
  const uploadTask = firebase.storage()
    .ref().child(this.PATH_VENUES + '/' + photo.name)
    .put(photo);

  uploadTask.on('state_changed', 
    (snapshot) => {
      // 可选：处理上传进度
      const progress = Math.floor((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
      console.log('上传进度:', progress + '%');
    },
    (error) => {
      // 上传出错时，把错误传递给订阅者
      this.viewUploadSubject.error(error);
      console.error('图片上传失败:', error);
    },
    () => {
      // 上传完成后更新venue字段
      venue.dateCreated = firebase.firestore.FieldValue.serverTimestamp();
      venue.dateUpdated = firebase.firestore.FieldValue.serverTimestamp();
      // 从uploadTask的完成快照获取下载链接
      venue.venuePhoto = uploadTask.snapshot.downloadURL;

      // 添加文档到Firestore，成功后发送文档ID
      this.venuesCollection.add(<Venue>venue.getData())
        .then((docRef) => {
          // 直接将文档ID发送给订阅者
          this.viewUploadSubject.next(docRef.id);
        })
        .catch((err) => {
          // 处理添加文档的错误
          this.viewUploadSubject.error(err);
          console.error('添加场地数据失败:', err);
        });
    }
  );

  // 返回Observable，避免外部直接操作Subject
  return this.viewUploadSubject.asObservable();
}

2. 修正组件中的订阅代码

现在你可以直接从订阅中拿到文档ID，无需依赖Zone的内部属性：

this.venueSvc.setVenuePhoto(this.venue, this.photo[0])
  .subscribe({
    next: (docId) => {
      console.log('获取到的场地文档ID:', docId);
      // 在这里使用docId执行场地信息更新操作
    },
    error: (err) => {
      console.error('操作失败:', err);
    }
  });

额外优化建议 #

• 可以用RxJS的from操作符将Promise转换为Observable，更贴合RxJS的异步流风格：

  // 在upload完成回调中替换add的then逻辑：
  const addDoc$ = from(this.venuesCollection.add(<Venue>venue.getData()));
  addDoc$.subscribe({
    next: (docRef) => this.viewUploadSubject.next(docRef.id),
    error: (err) => this.viewUploadSubject.error(err)
  });
  

• 如果不需要复用Subject，也可以直接返回新的Observable，避免维护Subject状态：

  setVenuePhoto(venue: any, photo: File): Observable<string> {
    return new Observable((observer) => {
      const uploadTask = firebase.storage()
        .ref().child(this.PATH_VENUES + '/' + photo.name)
        .put(photo);
  
      uploadTask.on('state_changed', 
        (snapshot) => { /* 进度处理 */ },
        (error) => observer.error(error),
        () => {
          // 更新venue字段...
          this.venuesCollection.add(<Venue>venue.getData())
            .then((docRef) => observer.next(docRef.id))
            .catch((err) => observer.error(err));
        }
      );
  
      // 可选：返回取消订阅逻辑，比如取消上传任务
      return () => uploadTask.cancel();
    });
  }
  

这样修改后，你就能安全、优雅地获取到Firestore返回的文档ID，用于后续的场地信息更新操作了。

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