Next.js + TypeScript项目中如何使用fetch获取的接口数据

你的报错核心是类型定义和实际传入的数据结构不匹配，JSONPlaceholder的/users接口返回的是用户对象数组，但你将auth0Data定义为了单个对象类型，且页面Props泛型多嵌套了一层，因此不存在数组专属的map方法。

修改步骤 #

1. 修正页面Props类型定义，将auth0Data改为数组类型，同时修正NextPage的泛型嵌套错误：

interface Auth0DataProps {
    id: number,
    name: string,
    username: string,
}

// 直接定义页面接收的根Props结构，auth0Data为数组类型
type Props = {
    auth0Data: Auth0DataProps[]
}

// NextPage泛型直接传入上面定义的Props即可，无需重复嵌套
const Dashboard: NextPage<Props> = ({ auth0Data }) => {
    console.log(auth0Data)
    return (
        <LayoutComponent title="User profile">
          {/* 可选添加可选链操作符，避免空值报错 */}
          {auth0Data?.map(data=> (
            <div key={data.id}>
              <p>用户名：{data.username}</p>
              <p>真实姓名：{data.name}</p>
            </div>
           ))}
        </LayoutComponent>
    )
}

2. 不需要修改getStaticProps的现有代码，其返回的auth0Data本身就是符合预期的数组结构。

错误原因说明 #

你原来的写法NextPage<{ auth0Data: Props }>相当于给Props又多套了一层外层结构，实际传入组件的auth0Data会被识别为你定义的Props类型，而你最初定义的Props内部的auth0Data才是单个用户对象，两层嵌套+未定义数组的组合，最终导致类型不匹配报错。

内容的提问来源于stack exchange，提问作者Danjuma Ashiwjau-Garba