React组件TypeScript类型化报错：unknown[]无法赋值给SetStateAction<never[]>

问题根源 #

• 初始化useState时传了空数组[]，TypeScript会默认把状态类型推断为never[]——这是最严格的空数组类型，任何其他类型的数组都无法赋值给它。
• arrayOfObj被推断为unknown[]，类型本身不明确，TypeScript无法确认它和状态类型匹配，因此抛出类型不兼容的错误。

解决方案 #

1. 给useState指定明确的泛型类型

直接告诉TypeScript状态的类型是Character[]，初始化时也要明确类型：

const [characters, setCharacters] = useState<Character[]>([]);

2. 处理arrayOfObj的unknown[]类型

因为arrayOfObj是unknown[]，需要让TypeScript确认它符合Character[]的结构，有两种常用方式：

方式一：类型断言（适合确定数据结构完全匹配的场景）

如果你能百分百保证arrayOfObj的结构和Character[]一致，可以直接用类型断言：

setCharacters(arrayOfObj as Character[]);

方式二：类型守卫（更安全，适合不确定数据结构的场景）

写一个类型守卫函数来校验每个元素是否符合Character类型，避免类型断言带来的风险：

function isCharacterArray(arr: unknown[]): arr is Character[] {
  return arr.every(item => {
    if (typeof item !== 'object' || item === null) return false;
    const char = item as Character;
    return (
      typeof char.name === 'string' &&
      Array.isArray(char.items) &&
      char.items.every(subItem => {
        return (
          typeof subItem.filepath === 'string' &&
          typeof subItem.group === 'string' &&
          typeof subItem.id === 'string' &&
          typeof subItem.isClicked === 'boolean'
        );
      })
    );
  });
}

// 使用时先做校验
if (isCharacterArray(arrayOfObj)) {
  setCharacters(arrayOfObj);
} else {
  console.error('arrayOfObj不符合Character数组的类型要求');
  // 这里可以添加错误处理逻辑，比如设置默认值
}

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