NextUI组件触发getStaticPaths不是函数错误，旧修复方案失效

问题背景 #

在NextJS项目中使用NextUI组件（如Button、Chip）时触发Type Error: getStaticPaths is not a function，且该错误仅在使用NextUI组件时出现。此前通过将组件从函数声明式导出改为函数表达式后导出的方式解决过该问题，但此次将Chip拆分为独立组件导入后无效。

排查与解决步骤 #

• 检查页面组件的生命周期函数定义
  该错误本质是NextJS期望getStaticPaths是一个异步函数，但实际获取到的不是。如果Dashboardhome是pages目录下的页面组件，需确认：

  • 没有误将组件本身赋值给getStaticPaths导出（比如export const getStaticPaths = Dashboardhome这种错误写法）
  • 若需要静态生成，getStaticPaths必须是正确的异步函数，示例：

    export async function getStaticPaths() {
      return {
        paths: [],
        fallback: false
      };
    }
    

  • 若使用NextJS 13+ App Router，需用generateStaticParams替代getStaticPaths，不要在App Router组件中导出getStaticPaths。

• 确认普通组件的导出干净
  检查Cbstaff.tsx和Premiumchip.tsx：

  • 确保没有额外导出名为getStaticPaths/getStaticProps的变量或函数（这些导出仅对pages目录的页面组件有效，普通组件中存在会导致NextJS误判）
  • 仅保留组件的默认导出，不要添加多余的页面生命周期相关导出。

• 校验NextUI与NextJS版本兼容性
  不同版本的NextUI对NextJS有版本要求（比如NextUI v2需要NextJS 13.4+），版本不匹配可能引发异常。执行对应包的升级/降级：

  # 升级NextUI到最新兼容版
  npm install @nextui-org/react@latest
  # 升级NextJS到对应版本
  npm install next@latest react@latest react-dom@latest
  

• 清理缓存并重启开发服务
  NextJS开发缓存可能导致异常残留，执行以下操作：

  # 删除.next缓存目录
  rm -rf .next
  # 重启开发服务
  npm run dev
  

• 检查组件导入路径
  确认Cbstaff和Premiumchip的导入路径正确，没有误导入到其他页面组件或存在同名的错误文件。

内容的提问来源于stack exchange，提问作者Kadin Ritchie