Firestore查询结果映射为Magus模型Observable时类型报错如何解决

报错根因 #

• 第一个报错Type 'Subscription' is missing the following properties from type 'Observable'：你将subscribe()方法返回的*订阅对象（Subscription）*直接赋值给了声明为Observable<Magus>类型的magus变量，二者类型不匹配。
• 第二个报错Observable<Magus[]>' is not assignable to type 'Observable<Magus>'：Firestore的collection.valueChanges()无论过滤后匹配多少条数据，默认返回的都是数组类型的可观察对象Observable<Magus[]>，和你需要的单个Magus对象的可观察对象类型不匹配。

修复步骤 #

第一步：修改服务层方法，将数组结果转换为单个对象 #

引入rxjs的map操作符，取匹配结果的第一个元素（因为characterid是唯一标识，匹配结果最多只有1条）：

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

// 修改后的服务方法
getCharacterDetail (charID: string, collection: string): Observable<Magus> {
    this.magiCollection = this.firestore.collection<Magus>(collection, ref => ref.where('characterid', '==', charID));
    return this.magiCollection.valueChanges().pipe(
      // 取数组第一个元素，转换为单个Magus对象的Observable
      map(magiList => magiList[0])
    );
}

额外说明：如果你需要用到Magus类中定义的方法，需要在此处手动实例化类，而非直接使用Firestore返回的普通JS对象：

map(magiList => {
  const data = magiList[0];
  return new Magus(
    data.characterid,
    data.playerUID,
    data.covenantID,
    // 按构造函数参数顺序补全所有入参即可
  )
})

第二步：修改组件层代码，避免类型混用 #

提供两种常用实现方案，二选一即可：

方案1：配合async管道使用（更推荐，无需手动管理订阅）

组件代码：

// 变量名加$是rxjs惯例，标识这是一个Observable类型
magus$: Observable<Magus>;

getCharacter() {
    if (this.collection === 'magi') {
      // 直接赋值Observable，不要subscribe
      this.magus$ = this.characterDataService.getCharacterDetail(this.charid, this.collection);
    }
}

模板中直接使用async管道自动订阅：

<!-- 示例：展示角色信息 -->
<div>角色名称：{{ (magus$ | async)?.info?.name }}</div>

方案2：手动订阅管理

组件代码：

import { Subscription } from 'rxjs';

// 声明为普通Magus实例类型，不要加Observable
magus: Magus;
// 单独存储订阅对象，用于销毁时取消订阅避免内存泄漏
private charSub: Subscription;

getCharacter() {
    if (this.collection === 'magi') {
      this.charSub = this.characterDataService.getCharacterDetail(this.charid, this.collection)
      .subscribe(magi => this.magus = magi);
    }
}

// 组件销毁时取消订阅
ngOnDestroy() {
  this.charSub?.unsubscribe();
}

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