React TypeScript中useState报“Property does not exist on type never[]”错误求助

核心原因 #

你的代码存在两个关键问题：

1. 状态类型与接口返回数据不匹配：你将enquetes初始化为数组[]，但接口返回的是单个对象（不是数组），数组本身没有title属性，自然会报错。
2. 未正确指定状态类型：初始useState([])未声明类型时，TypeScript会推断为never[]（空数组且永远不会有元素），所以不允许访问任何不存在的属性。

解决方案 #

步骤1：定义数据类型接口（替代any，更规范） #

先根据接口返回的结构定义TypeScript接口，明确数据的类型：

// 接口属性根据实际返回数据补充
interface Enquete {
  id: string;
  title: string;
  description?: string; // 可选属性用?标记
  // 其他返回字段...
}

步骤2：修正状态的初始值与类型 #

因为接口返回单个对象，所以状态类型应为Enquete | null（初始值设为null，避免未请求到数据时的错误）：

import { useState, useEffect } from 'react';

const [enquetes, setEnquetes] = useState<Enquete | null>(null);

api.get('/polls/b44a0040-5201-4f0e-ba68-2b51545d5276').then((response) => {
  setEnquetes(response.data);
});

// 注意：setState是异步操作，直接在then里console.log(enquetes)拿不到新值，需要用useEffect监听状态变化
useEffect(() => {
  if (enquetes) {
    console.log(enquetes.title); // 此时能正确访问title
  }
}, [enquetes]);

步骤3：组件中安全访问属性 #

在组件渲染时，用**可选链操作符?.**避免初始值为null时的报错：

return (
  <div>
    {enquetes?.title}
    {enquetes?.description}
  </div>
);

特殊情况：如果接口返回的是数组 #

如果接口确实返回数组（比如多个问卷数据），则修正状态类型为数组，并访问数组元素的属性：

const [enquetes, setEnquetes] = useState<Enquete[]>([]);

api.get('/polls').then((response) => {
  setEnquetes(response.data);
});

// 访问方式：遍历数组或通过索引访问
enquetes.forEach(item => console.log(item.title));
// 或
console.log(enquetes[0]?.title);

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