React TypeScript获取单条API数据时出现Property does not exist错误求助

问题根源 #

你请求的是单条帖子数据（/posts/${id}），但错误地将数据类型定义为Todo数组（Todo[]），而实际API返回的是单个Todo对象。TypeScript检测到你试图访问数组类型上不存在的title/body属性，因此抛出错误。

修改步骤 #

1. 修正State的类型和初始值 #

将data的类型从Todo[]改为Todo | null，初始值设为null（初始状态下无数据）：

const [data, setData] = useState<Todo | null>(null);

2. 修正Axios请求的泛型类型 #

Axios的get方法泛型要对应单个Todo对象，而非数组：

const res = await axios.get<Todo>(`https://jsonplaceholder.typicode.com/posts/${id}`);

3. 渲染时处理空值 #

因为data可能为null，渲染前需先判断数据是否存在，避免运行时错误：

{data && (
  <>
    <div className='text-2xl'>{data.title}</div>
    <div className='text-xl'>{data.body}</div>
  </>
)}

完整修正后的代码 #

import { useParams } from "react-router-dom";
import axios from "axios";
import { useState, useEffect } from "react";

const SinglePOST = () => {
  type Todo = {
    title: string;
    body: string;
    userId: number;
    id: number;
  };

  const { id } = useParams();
  const [data, setData] = useState<Todo | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [isError, setError] = useState<any>(null);

  useEffect(() => {
    const singleReq = async () => {
      try {
        setLoading(true);
        const res = await axios.get<Todo>(
          `https://jsonplaceholder.typicode.com/posts/${id}`
        );
        setData(res.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    singleReq();
  }, [id]);

  return (
    <div className='w-full h-screen bg-slate-900 text-neutral-300 p-4'>
      <div className='w-full flex justify-center'>Single Post {id}</div>
      {loading && <p>...Loading</p>}
      {isError && <p>Error in getting post</p>}
      {data && (
        <>
          <div className='text-2xl'>{data.title}</div>
          <div className='text-xl'>{data.body}</div>
        </>
      )}
    </div>
  );
};

export default SinglePOST;

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