Hur man skickar 'blocking' till getStaticPaths med TypeScript i Next.js?

Jag skulle använda fallback: 'blocking', för min Next.js-sida, men TypeScript vägrar det. Har den senaste 12.2.0 Next.js. Vad är fel?

Type '() => Promise<{ paths: any; fallback: string; }>' is not assignable to type 'GetStaticPaths<ParsedUrlQuery>'.
  Type 'Promise<{ paths: any; fallback: string; }>' is not assignable to type 'GetStaticPathsResult<ParsedUrlQuery> | Promise<GetStaticPathsResult<ParsedUrlQuery>>'.
    Type 'Promise<{ paths: any; fallback: string; }>' is not assignable to type 'Promise<GetStaticPathsResult<ParsedUrlQuery>>'.
      Type '{ paths: any; fallback: string; }' is not assignable to type 'GetStaticPathsResult<ParsedUrlQuery>'.
        Types of property 'fallback' are incompatible.
          Type 'string' is not assignable to type 'boolean | "blocking"'.

och koden:

export const getStaticPaths: GetStaticPaths = async () => {
// ...
    const paths = res.data.map((organizationAndPostId: string) => ({
        params: {
            organizationShortId: organizationAndPostId[0],
            postId: organizationAndPostId[1],
            tempUserShortId: organizationAndPostId[2],
            imgId: organizationAndPostId[3],
        },
    }))

    let ret = {
        paths,
        fallback: 'blocking',
    }
    return ret
}

Jag tror problemet är med " eller '. Men VSCode konverterar det automatiskt till '.

Svar #1

Du får typfelet eftersom när du deklarerar ret-objektet antar TypeScript att fallback är av typen string istället för att vara den literala strängen 'blocking'. Med andra ord blir ret-objektet internt typat på följande sätt, vilket är inkompatibelt med den förväntade GetStaticPaths-typen.

const obj: { 
    paths: { 
        params: { category: string; }; 
    }[];
    fallback: string; // `GetStaticPaths` expects this to be of type `boolean | 'blocking'`
}

För att åtgärda problemet kan du antingen returnera objektet direkt, utan den mellanstegande variabeln.

export const getStaticPaths: GetStaticPaths = async () => {
    //...

    return {
        paths,
        fallback: 'blocking'
    }
}

Eller alternativt, omvandla fallback-värdet till en const för att tvinga det till literalsträngstyp.

export const getStaticPaths: GetStaticPaths = async () => {
    //...

    let ret = {
        paths,
        fallback: 'blocking' as const,
    }
    return ret
}