传递带有自定义类型、nextJS、typescript的prop

Question

我有一个包含JSON数据的数组，该数据是在http调用后获取的，然后我将其类型分配给Service。

type Service = {
id?: string;
name?: string;
description?: string;
};

我在getServerSideProps中调用api，并将Service类型分配给data:

export async function getServerSideProps() {
const data: Service = (await getServices()).data;
console.log(data);
return {
props: { data }, // will be passed to the page component as props
};
}

然而，一旦道具被传递到Page组件，它似乎已经失去了它的类型，我得到错误消息'属性'数据'不存在类型'{}'。

data现在的类型似乎是'any' ?

const DigitalServices: NextPage = ({ data }) => (

我如何解决这个错误，我知道我可以做{data}: any，但这违背了使用typescript的意义?由于

Answer 1

你还应该指定你要在组件中获得的道具的类型:

const DigitalServices: NextPage<{data: Service}> = ({ data }) => (