严格模式下TypeScript解构赋值报错：类型需含[Symbol.iterator]()方法

错误原因 #

toPromise() 方法返回的类型是 Promise<MyType<string>[] | undefined>——当 Observable 没有发出任何值就完成时，会返回 undefined。严格模式下 TypeScript 不允许对可能为 undefined 的值执行数组解构操作，因此抛出该错误。

解决方案 #

方案1：给解构添加默认值 #

通过空合并运算符（??）给可能为 undefined 的结果设置默认空数组，确保解构操作始终能作用于数组类型：

const [optionAll, ...options] = (await service.getLineOfBusiness().toPromise()) ?? [];

方案2：使用 RxJS 推荐的 firstValueFrom/lastValueFrom 替代 toPromise() #

RxJS 7+ 已废弃 toPromise()，推荐使用 firstValueFrom（获取第一个发出的值）或 lastValueFrom（获取最后一个发出的值）。这两个方法会在 Observable 没有发出值时抛出错误，返回的 Promise 类型为确定的数组，不会包含 undefined：

import { firstValueFrom } from 'rxjs';

// 直接使用，无值时抛出错误
const result = await firstValueFrom(service.getLineOfBusiness());
const [optionAll, ...options] = result;

// 或处理无值的情况
try {
  const result = await firstValueFrom(service.getLineOfBusiness());
  const [optionAll, ...options] = result;
} catch (error) {
  // 处理未获取到数据的场景
  console.error('Failed to get line of business data:', error);
}

方案3：提前检查并处理 undefined #

先判断结果是否为 undefined，确认是数组后再执行解构：

const result = await service.getLineOfBusiness().toPromise();
if (!result) {
  // 可根据业务需求抛出错误、设置默认数据等
  throw new Error('Line of business data is missing');
}
const [optionAll, ...options] = result;

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