const声明组件可应用NextPageWithLayout类型，function声明报错如何解决？

问题场景 #

我参考NextJS官方文档实现布局，在_app.tsx中定义了扩展类型：

// _app.tsx
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
  auth?: boolean;
};

用const声明组件并指定该类型时，添加getLayout完全正常：

// index.tsx
const LoginPage:NextPageWithLayout = () =>{
  return (
    <>
<h1>Start</h1>
    </>
  );
}

LoginPage.getLayout = function getLayout(page: ReactElement) {
  return (
    <>
      {page}
      <Footer />
    </>
  );
};

export default LoginPage;

但用function声明组件并把返回值指定为NextPageWithLayout时，添加getLayout会触发类型错误：

function LoginPage():NextPageWithLayout {
  return (
    <>Start</>
  );
}

LoginPage.getLayout = function getLayout(page: ReactElement) {
  return (
    <>
      {page}
      <Footer />
    </>
  );
};

问题根源 #

函数声明时的类型标注逻辑错误：

• const声明方式是把**整个组件函数（包括其属性）**指定为NextPageWithLayout类型，因此getLayout属于合法属性；
• function声明时，你错误地把组件的返回值设为NextPageWithLayout，但组件函数本身的类型仍是默认的React函数组件类型，不包含getLayout属性，所以添加属性时会触发类型校验错误。

解决方法 #

方法1：为函数组件本身指定类型

直接给函数本身标注NextPageWithLayout类型，而非给返回值加类型：

const LoginPage: NextPageWithLayout = function() {
  return (
    <>Start</>
  );
};

LoginPage.getLayout = function getLayout(page: ReactElement) {
  return (
    <>
      {page}
      <Footer />
    </>
  );
};

也可以用类型断言给函数补全类型：

function LoginPage() {
  return (
    <>Start</>
  );
}

(LoginPage as NextPageWithLayout).getLayout = function getLayout(page: ReactElement) {
  return (
    <>
      {page}
      <Footer />
    </>
  );
};

方法2：先定义组件类型再声明函数

先明确组件函数的类型别名，再绑定到组件上：

type LoginPageComponent = NextPageWithLayout;

const LoginPage: LoginPageComponent = () => {
  return (
    <>Start</>
  );
};

LoginPage.getLayout = function getLayout(page: ReactElement) {
  return (
    <>
      {page}
      <Footer />
    </>
  );
};

核心逻辑：NextPageWithLayout是组件函数本身的类型（包含可选的getLayout属性），而非组件返回JSX的类型。使用function声明组件时，需给函数本身指定该类型，而非给返回值标注。

内容的提问来源于stack exchange，提问作者HM.Park