TypeScript+React：接口存在属性却提示属性不存在的问题求助

错误原因 #

• 类型声明不匹配：你将状态data的类型定义为Root[]（Root对象数组），但API实际返回的是单个Root对象。TypeScript会严格校验类型，数组不存在stationId属性，因此抛出Property 'stationId' does not exist on type 'Root[]'错误。
• 错误的类型断言：getTimes函数里你用data as Root[]强行把单个对象断言为数组，导致运行时虽然能打印数据，但类型系统不认可数组访问对象属性的操作。

修复步骤 #

1. 修正类型定义 #

将状态和请求函数的类型统一为单个Root对象：

// 修改状态声明，初始值设为undefined（请求完成前无数据）
const [data, setData] = useState<Root>();

// 修改请求函数返回类型为Promise<Root>，移除错误断言
function getTimes(): Promise<Root> {
  return fetch("http://localhost:3000/times/9117")
    .then((res) => res.json())
    .then((data) => data as Root);
}

2. 安全访问属性 #

由于初始状态data是undefined，直接访问属性会触发运行时错误，需通过以下方式处理：

• 可选链操作符：快速处理空值情况

  return <div className="App">{data?.stationId}</div>;
  

• 条件渲染：更灵活的加载状态处理

  return (
    <div className="App">
      {data ? (
        <>
          <p>站点ID：{data.stationId}</p>
          {/* 渲染Metros数组 */}
          <div className="metros">
            {data.results.Metros.map((metro, idx) => (
              <div key={idx}>{/* 替换为metro的实际属性，比如metro.name */}</div>
            ))}
          </div>
        </>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
  

3. 读取results.Metros属性 #

确保data存在后，直接通过链式访问即可：

// 在请求回调中打印Metros
useEffect(() => {
  getTimes().then((item) => {
    setData(item);
    console.log(item.results.Metros); // 请求成功后直接访问
  });
}, []);

// 在JSX中渲染Metros列表
{data?.results.Metros.map((metro) => (
  <div key={metro.id}>{metro.someProperty}</div>
))}

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