如何正确键入Next.js getServerSideProps作为函数声明

2mbi3lxu  于 2023-01-08  发布在  其他
关注(0)|答案(2)|浏览(128)

我正在输入getServerSidePropsguide docsAPI reference docs),但我能找到的所有文档都与将其声明为函数表达式有关。我希望将其编码为函数声明,但找不到任何相关文档,并且在使其工作时遇到了麻烦。
作为函数表达式(这是有效的):

import { GetServerSideProps } from 'next';

export type Data = {
  example: string,
};

export const getServerSideProps: GetServerSideProps<data: Data> = async (context) => {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    };
}

这就是我把它作为函数声明的地方:

import { GetServerSideProps, GetServerSidePropsContext } from 'next';

export type Data = {
    example: string,
};

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<GetServerSideProps<data: Data>> {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    };
}

就声明本身而言,TypeScript对此很满意,但是在组件声明TS2339: Property 'example' does not exist on type 'never'.上出现了一个错误

export default function ExampleComponent(data: InferGetServerSidePropsType<typeof getServerSideProps>) {
    return (
        <>
            <p>{data.example}</p>
        </>
    );
}

我错过了什么?我如何正确地使用getServerSideProps的函数声明并获得正确的类型?
谢谢。

sg24os4d

sg24os4d1#

好的,非常肯定我现在找到了正确的答案,从next中发现了GetServerSidePropsResult类型。

import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Data>> {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    }
}
z31licg0

z31licg02#

    • 这是可行的,但请参阅我的其他答案,它更好地利用了Next.js提供的类型。**

看起来我自己找到了答案,但如果这能做得更好,那么我会很感激听到它。

import { GetServerSidePropsContext } from 'next';

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<{props: Data}> {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    }
}

相关问题