Next.js传递组件Props时如何声明类型？Item类型不存在data属性报错求解

你给ProductList组件声明的Props类型存在错误：当前写的({ data }: Array<Item>)等于告诉TS整个props对象是Item类型的数组，但实际上你的props是包含data字段的对象，只有data字段的值才是Array<Item>类型，TS在数组类型上找不到data属性自然就会抛出报错。

1. 修正ProductList组件的Props类型声明 #

调整组件的类型声明即可解决报错，同时顺便修正其他潜在问题：

import { Item } from '../../pages/products/index'
// 先定义组件的Props类型
interface ProductListProps {
  data: Array<Item>
}
const ProductList = ({ data }: ProductListProps) => {
  const renderData = () => {
    // 注意不能直接渲染i对象，需要取出对象下的对应字段
    return data.map((i,index) => {
      return <div key={index}>{i.title} - ￥{i.price}</div>
    })
  }
  // 把渲染内容插入到返回的节点中，否则页面展示为空
  return <div>{renderData()}</div>
}
export default ProductList

2. 可选优化：给getServerSideProps增加泛型约束 #

给getServerSideProps加上返回Props的泛型，既可以获得更完整的类型提示，也能避免后续类型推导出错：

import {
    InferGetServerSidePropsType,
    GetServerSideProps
} from 'next'
import ProductList from '../../component/product/ProductList'
export interface Item {
    title: string
    price: number
}
// 定义服务端返回的Props类型
type ServerProps = {
  data: Array<Item>
}
const products = ({
    data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    return (
        <div>
            <ProductList data={data} />
        </div>
    )
}
// 给GetServerSideProps传入泛型，context不需要手动写any类型会自动推导
export const getServerSideProps:GetServerSideProps<ServerProps> = async (context) => {
    let res = await fetch('/getAllProduct', {
        method: 'get',
    })
    const response: Array<Item> = await res.json()

    return {
        props: {
            data: response,
        },
    }
}
export default products

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