NextJS：来自 getStaticProps 的值和组件中的参数

Question

Using the following code I am loading markdown files from a directory that I want to pass to a component which displays one of the markdown files. Therefore, I want to specify which file should be shown using a parameter in the component. The problem with that is this error which appears when I try to use the component and (of course) only specify the documentType:

Property 'legalDocuments' is missing in type '{ documentType: string; }' but required in type '{ legalDocuments: any; documentType: any; }'.

I am looking for a solution to this problem.

import marked from 'marked';
import getConfig from 'next/config';
import path from 'path';
import fs from 'fs';
import { useRouter } from 'next/router';

export async function getStaticProps() {
    const { serverRuntimeConfig } = getConfig()

    function getLegalDocument(key: string, locale: string) { 
        return marked.parse(fs.readFileSync(path.join(serverRuntimeConfig.PROJECT_ROOT, './legal', key + '.' + locale + '.md'), 'utf8'))
    }

    let legalDocuments = { 
        legalNotice: {
            de: getLegalDocument('legal_notice', 'de'),
            en: getLegalDocument('legal_notice', 'en'),
            es: getLegalDocument('legal_notice', 'es'),
            fr: getLegalDocument('legal_notice', 'fr'),
            it: getLegalDocument('legal_notice', 'it'),
        },
        privacyPolicy: {
            de: getLegalDocument('privacy_policy', 'de'),
            en: getLegalDocument('privacy_policy', 'en'),
            es: getLegalDocument('privacy_policy', 'es'),
            fr: getLegalDocument('privacy_policy', 'fr'),
            it: getLegalDocument('privacy_policy', 'it'),
        },
        termsOfService: {
            de: getLegalDocument('terms_of_service', 'de'),
            en: getLegalDocument('terms_of_service', 'en'),
            es: getLegalDocument('terms_of_service', 'es'),
            fr: getLegalDocument('terms_of_service', 'fr'),
            it: getLegalDocument('terms_of_service', 'it'),
        }
     }
    return { 
        props: legalDocuments,
    }
};

type Props = {
    documentType: string
}

const LegalDocument = ({ legalDocuments, documentType }) => {
    const languages: Map<String, String> = legalDocuments[documentType]
    const { locale, locales, defaultLocale, asPath } = useRouter();
    let document = ''
    
    if (locale in languages) {
        document = languages[locale]
    } else if (defaultLocale in languages) {
        document = languages[defaultLocale]
    } else {
        return documentType
    }
    
    return (
        <div>
            {document}
        </div>
    )
}

export default LegalDocument

Answer 1

You should define the legalDocuments object in your Props as well.

type Props = {
    legalDocuments?: any;
    documentType: string;
}

Anyway, it would be better to define the expected type for legalDocuments as well, to avoid declaring it as any :

type LegalDocType = {
    legalNotice: {
        de: string;
        en: string;
        es: string;
        fr: string;
        it: string;
    },
    privacyPolicy: { ... }
    termsOfService: { ... }
}

type Props = {
    legalDocuments?: LegalDocType;
    documentType: string;
}

Finally, edit your component definition to include the Props declaration:

import React from 'react';

const LegalDocument: React.FC<Props> = ({ legalDocuments, documentType }) => { ... }