Next.js页面如何动态导入TS导出的数组数据而非完整组件

错误原因 #

你遇到的报错是因为普通React组件（非服务端组件）不支持声明为async函数，async函数执行后返回的是Promise对象，React无法直接将Promise作为渲染内容输出。

解决方案1：使用Pages Router原生数据获取方法（推荐，利于SEO） #

你用的是Next.js的Pages Router，直接把动态导入逻辑放到getStaticProps（静态生成场景）或getServerSideProps（服务端渲染场景）中即可，数据会作为props传递给页面组件，无需把页面组件改为async：

// pages/page.tsx
// 页面组件改为普通同步函数，直接接收items作为props
const Page = ({ t, items, ...props }: Props) => {
    return (
        <>
            <Head>
                <title>dynamic test</title>
            </Head>
            <MyPage items={items} />
        </>
    );
};

// 静态生成场景用getStaticProps，构建/增量更新时预取数据
export const getStaticProps = async (context) => {
    const locale = context.locale;
    const items = (await import(`../page-data/myitems/${locale}`)).default;
    return {
        props: {
            items,
        },
        // 可选：开启增量静态再生，单位为秒
        revalidate: 86400
    };
};

如果需要每次请求都获取最新数据，把getStaticProps换成getServerSideProps即可，写法逻辑完全一致。

解决方案2：客户端侧异步加载（适合无SEO要求的场景） #

如果不需要服务端渲染该部分内容，可以在组件内用useState+useEffect实现异步加载，加个加载态处理即可：

import { useEffect, useState } from 'react';

const Page = ({ t, ...props }: Props) => {
    const [items, setItems] = useState<{title: string, category: string}[]>([]);
    const [loading, setLoading] = useState(true);
    const locale = props._nextI18Next.initialLocale;

    useEffect(() => {
        const loadItems = async () => {
            const loadedItems = (await import(`../page-data/myitems/${locale}`)).default;
            setItems(loadedItems);
            setLoading(false);
        };
        loadItems();
    }, [locale]);

    // 加载中显示占位内容
    if (loading) return <div>加载中...</div>;

    return (
        <>
            <Head>
                <title>dynamic test</title>
            </Head>
            <MyPage items={items} />
        </>
    );
};

内容的提问来源于stack exchange，提问作者Kristi Jorgji