如何为useState定义类型解决TypeScript访问state属性的never类型报错

报错核心原因 #

该报错属于useState的类型推导偏差问题，和业务逻辑无关。当初始传入空数组、无意义空值作为useState的初始值时，如果没有显式指定泛型类型，TypeScript会将空数组的元素类型推导为never，即判定“这个数组永远不会包含任何有效元素”。后续对数组元素访问state属性时，自然会触发Property 'state' does not exist on type 'never'的报错。

分步修复方案 #

1. 定义与接口返回结构完全匹配的类型 #

先按照Covid Act Now返回的州级数据字段，定义清晰的TypeScript接口，从根源上对齐数据结构：

// 疫情核心指标子结构
interface CovidActuals {
  cases: number;
  deaths: number;
}

// 单条州级数据完整结构
interface StateCovidData {
  fips: string;
  country: string;
  state: string; // 州缩写标识，例如"AK"
  county: string | null;
  level: string;
  actuals: CovidActuals;
  metrics: Record<string, number | null>;
  population: number;
}

2. 修正useState的泛型标注 #

对比触发报错的原写法，给每个useState明确指定匹配的类型，替代TS默认的推导结果：

// 触发报错的原写法
// const [stateName, setStateName] = useState("AK");
// const [data, setData] = useState([]); // 被推导为never[]，是报错核心根源
// const [stateData, setStateData] = useState(); // 被推导为undefined，后续访问属性也会报错

// 修正后的标准写法
// 选中的州名称，为字符串类型
const [stateName, setStateName] = useState<string>("AK");
// 全量州数据数组，元素类型为之前定义的StateCovidData
const [data, setData] = useState<StateCovidData[]>([]);
// 匹配到的单条州数据，初始无匹配结果时为null
const [stateData, setStateData] = useState<StateCovidData | null>(null);

3. 对齐数据请求流程的类型一致性 #

在axios请求阶段就指定返回数据的类型，避免隐式的any类型转换，确保全流程的类型统一：

import axios from 'axios';

const fetchCovidData = async () => {
  // 给axios.get指定泛型，确保响应数据结构和自定义类型完全匹配
  const response = await axios.get<StateCovidData[]>('Covid Act Now 州级数据接口地址');
  const allStateList = response.data;
  // 存入全量数据数组
  setData(allStateList);
  // 匹配当前选中的州条目
  // 若习惯使用filter，在类型正确的前提下也可正常运行：allStateList.filter(item => item.state === stateName)[0]
  const matchedState = allStateList.find(item => item.state === stateName);
  // 无匹配结果时赋值为null，和stateData的类型定义完全对齐
  setStateData(matchedState ?? null);
}

常见避坑提醒 #

• 不要为了快速消错把data的类型写成any[]，会完全失去TypeScript的类型校验价值，后续字段拼写错误、类型不匹配的问题都不会被TS主动提示
• 不要省略stateData的| null联合类型，否则初始值为undefined时，后续访问stateData.actuals.cases会触发“属性不存在于undefined”的新报错
• 不要用强制类型断言（例如item as any）跳过类型检查，这类操作只是隐藏了报错，没有从根本上修正类型和实际数据结构的匹配关系

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