React中无法向数组添加对象：never类型不匹配问题求助

问题原因 #

当你用useState([])初始化状态时，严格模式下的TypeScript无法推断数组的元素类型，会默认将其判定为never[]。此时往数组中添加任何类型的元素，都会触发Type '{ id: string; another: number; }' is not assignable to type 'never'的类型错误。

在线playground无报错，大概率是因为其TypeScript配置未开启严格模式，对类型推断的约束更宽松。

解决方案 #

1. 显式指定数组元素类型（推荐） #

先定义元素的类型接口或类型别名，再在useState中明确指定数组类型：

import React, { useState } from 'react';

// 定义元素类型
interface ExampleItem {
  id: string;
  another: number;
}

export default function App() {
  // 显式指定数组类型为 ExampleItem[]
  const [example, setExample] = useState<ExampleItem[]>([]);

  const ButtonClick = () => {
    setExample([...example, { id: 'Hi', another: 12 }]);
  };

  return (
    <div className='App'>
      <button onClick={ButtonClick}>This is a button</button>
    </div>
  );
}

2. 适配数据库数据场景 #

如果数据来自数据库，先定义与返回数据结构匹配的类型，获取数据后通过类型断言或类型守卫确保类型安全：

import React, { useState, useEffect } from 'react';

// 定义数据库返回的数据类型
interface DbExampleItem {
  id: string;
  another: number;
  // 补充数据库返回的其他字段
}

export default function App() {
  const [example, setExample] = useState<DbExampleItem[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/your-api-endpoint');
      // 使用类型断言指定返回数据类型，或用类型守卫做更严格的校验
      const data = await response.json() as DbExampleItem[];
      setExample(data);
    };
    fetchData();
  }, []);

  const ButtonClick = () => {
    setExample([...example, { id: 'Hi', another: 12 }]);
  };

  return (
    <div className='App'>
      <button onClick={ButtonClick}>This is a button</button>
    </div>
  );
}

3. 临时快速解决方案（不推荐） #

如果不想单独定义接口，可以直接在useState中内联指定元素类型，但这种方式不利于代码维护：

const [example, setExample] = useState<{ id: string; another: number }[]>([]);

内容的提问来源于stack exchange，提问作者Ori Lewy Ghost Banana