如何解决Unhandled Rejection(TypeError)：无效尝试展开非可迭代实例报错

报错说明 #

Unhandled Rejection (TypeError): Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method

该报错的触发原因是运行时传入sortContracts函数的contracts参数不是可迭代的数组类型：虽然TypeScript静态类型标注它为ContractUsage[]，但TypeScript仅做编译时校验，若contracts来源于接口响应、组件动态传值等场景，运行时实际可能为undefined、null、普通对象这类没有内置Symbol.iterator的非可迭代值，使用展开运算符...时就会抛出错误。

修复方案 #

第一步：函数内加入入参兼容逻辑 #

在函数最开始先对入参做校验兜底，保证后续操作的一定是数组，修改后的完整代码如下：

function sortContracts(
  contracts: ContractUsage[],
  sortField?: SortType,
  sortDirection?: SortDirection
): any[] {
  // 新增入参兼容：如果传入值不是数组，统一兜底为空数组
  const safeContracts = Array.isArray(contracts) ? contracts : [];
  let sortFunction:any
  switch (sortField) {
    // Sort by End Date
    case SortType.DATE_SORT:
      if (sortDirection === SortDirection.ASC) {
        sortFunction = (a:any, b:any) => endDateSortAscFunc(a, b);
      } else {
        sortFunction = (a:any, b:any) => endDateSortDescFunc(a, b);
      }
      break;

    // Sort by ContractID
    case SortType.CONTRACT_SORT:
      if (sortDirection === SortDirection.ASC) {
        sortFunction = (a:any, b:any) => contractIdSortAscFunc(a, b);
      } else {
        sortFunction = (a:any, b:any) => contractIdSortDescFunc(a, b);
      }
      break;

    case SortType.USAGE_ORDER:
      if (sortDirection === SortDirection.ASC) {
        sortFunction = (a:any, b:any) => usageOrderSortAscFunc(a, b);
      } else {
        sortFunction = (a:any, b:any) => usageOrderSortDescFunc(a, b);
      }
      break;
    // default sort
    default:
      sortFunction = (a:any, b:any) => contractIdSortAscFunc(a, b);
  }

  // 替换所有操作原contracts的逻辑为safeContracts
  console.log('contract here: ',  [...safeContracts].sort(sortFunction))
  return [...safeContracts].sort(sortFunction);
}

第二步：上游传值校验 #

追溯contracts的传入来源做进一步优化：

• 如果是接口返回值：确认接口返回的对应字段是否为数组结构，避免后端返回null、对象等不符合预期的格式
• 如果是组件Props传值：给Props设置默认值为空数组，从上游避免非数组值传入

可选优化 #

如果希望替换展开运算符的写法，也可以用数组的slice方法复制原数组，效果完全一致：

// 替换 [...safeContracts].sort(sortFunction) 为以下写法
return safeContracts.slice().sort(sortFunction);

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