NextJS调用API报错：类型'Response'缺少'employeeStrengths[]'属性

错误原因 #

你直接将fetch返回的Response对象传给了DataTable的data属性，但组件需要的是employeeStrengths[]类型的数组。Response对象是HTTP响应的包装（包含状态码、请求头等信息），并不具备数组的length、push等方法，因此触发类型不匹配错误。

修复步骤 #

1. 解析响应体为JSON数据 #

fetch请求成功后，需要调用.json()方法将响应体解析为实际的业务数据（你的employeeStrengths[]数组），而不是直接返回Response对象。

2. 明确类型定义（可选但推荐） #

为employeeStrengths定义接口，让TypeScript能准确推断数据类型，避免后续潜在错误。

修复后的完整代码 #

// 先定义employeeStrengths的类型结构，根据你的实际数据字段调整
interface employeeStrengths {
  id: number;
  name: string;
  // 补充你的其他数据字段
}

async function getData(): Promise<employeeStrengths[]> {
  const results = await fetch("http://localhost:8080/employeeStrengths");

  if (!results.ok) {
    throw new Error("Failed to fetch data");
  }

  // 解析响应体为JSON数组，替换原有的直接返回Response对象
  return results.json();
}

const Employees = async () => {
  const data = await getData();

  return (
    <>
      <span className="font-bold text-4xl">Employees</span>
      <div className="container mx-auto py-10">
        <DataTable columns={columns} data={data} />
      </div>
    </>
  );
};

export default Employees;

关键说明 #

• .json()方法返回Promise，会自动将响应体解析为JSON格式的数组，正好匹配employeeStrengths[]的类型要求。
• 为getData指定返回类型Promise<employeeStrengths[]>，能让TypeScript在编译阶段就校验数据类型，提前规避潜在的运行时错误。

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