Next.js App Router跨页面组件导入构建报错问题求助

错误原因 #

Next.js App Router 对 page.tsx 的默认导出组件有严格的类型限制：这类组件是路由专属页面组件，仅允许接收框架自动注入的 props（如 params、searchParams），不能自定义额外的 props。你直接将 companies/page.tsx 当作普通组件导入并传递 onSaveSuccess，开发阶段类型校验宽松不会报错，但构建时会触发严格检查导致失败。

解决方案：抽离可复用组件 #

核心思路是把页面中需要复用的UI和逻辑从路由页组件中分离出来，让路由页专注于路由功能，复用部分作为独立组件使用。

步骤1：创建可复用组件 #

在 app/companies/components/ 目录下新建 CompaniesPortal.tsx，把原 CompaniesPage 的核心逻辑和UI迁移过来：

export interface CompaniesPortalProps {
  onSaveSuccess?: () => void;
}

const CompaniesPortal = (props: CompaniesPortalProps) => {
  // 原CompaniesPage的业务逻辑，包括调用onSaveSuccess的代码
  return <p>Hello world</p>;
};

export default CompaniesPortal;

步骤2：修改原路由页面组件 #

更新 companies/page.tsx，让它复用刚创建的组件，只保留路由相关逻辑：

import CompaniesPortal from './components/CompaniesPortal';

// 路由页面组件使用Next.js默认的参数（如需路由参数可添加params/searchParams）
const CompaniesPage = () => {
  return <CompaniesPortal />;
};

export default CompaniesPage;

步骤3：在管理员页面导入复用组件 #

修改 administrators/page.tsx，导入抽离的 CompaniesPortal 而非原路由页面组件：

import { useState } from 'react';
import CompaniesPortal from '@/companies/components/CompaniesPortal';

const AdministratorsPage = () => {
  const [isOpen, setIsOpen] = useState(false);
  
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>click me</button>
      <Modal open={isOpen}>
        <CompaniesPortal onSaveSuccess={() => closeModal()} />
      </Modal>
    </div>
  );
};

export default AdministratorsPage;

这样修改后，既保留了 companies 路由页的正常功能，又能在管理员页面的模态框中复用核心逻辑，同时符合Next.js App Router的设计规范，构建时不会再触发类型错误。

内容的提问来源于stack exchange，提问作者Islam Y-