Next.js路由组中动态导入的实现及报错问题排查

云原生阿岚

2026-6-17

Next.js 路由组中 useEffect 动态导入报错解决方案

先修正代码里的语法硬伤

你贴的代码有两处明显语法错误，这是导致报错的直接原因之一：

模板字符串里的 .ts 位置写错，且引号未正确闭合
useEffect 的回调函数不能直接用 await，必须包裹在异步函数里

错误代码的问题点：

useEffect(()=>{
  const blogFound = await import(`./(blog-articles)/${params['blog-id'].ts`});
});

正确的动态导入写法

结合 Next.js 路由组的路径规则，修正后的代码如下：

import { useEffect, useState } from 'react';

export default function BlogPage({ params }) {
  const [blogData, setBlogData] = useState(null);

  useEffect(() => {
    // 把异步逻辑包在单独的函数里
    const loadBlogData = async () => {
      try {
        // 路由组只是逻辑分组，导入时不需要写 (blog-articles) 部分
        const dataModule = await import(`./${params['blog-id']}.ts`);
        // 根据文件导出方式取数据，default 是默认导出，直接取 module 是命名导出
        setBlogData(dataModule.default || dataModule);
      } catch (err) {
        console.error('加载博客数据失败:', err);
      }
    };

    loadBlogData();
  }, [params['blog-id']]); // 把参数加入依赖数组，确保参数变化时重新加载

  if (!blogData) return <div>加载中...</div>;

  return <div>{/* 这里渲染你的博客内容 */}</div>;
}

关键注意事项：路由组的路径规则

Next.js 里的路由组（比如 (blog-articles)）只是用来组织路由结构的逻辑分组，不会出现在实际的文件系统路径或导入路径中。所以当你在 app/(blog-articles) 目录下的组件里导入同目录的文件时，直接写文件名即可，不需要加 (blog-articles) 前缀。