使用next/auth时，React.FC组件添加auth属性出现TS错误的解决方案

你的问题核心是React.FC的默认类型不包含auth属性，TypeScript无法识别你给组件添加的自定义属性，所以抛出错误。下面是几种可行的解决办法：

方法1：自定义带auth属性的组件类型 #

创建一个包含auth可选属性的自定义组件类型，替代默认的React.FC：

// 定义通用的页面组件类型，包含auth属性
type PageComponent<P = {}> = React.FC<P> & {
  auth?: boolean;
};

// 使用自定义类型声明HomePage
export const HomePage: PageComponent = () => {
  const { user, isLoading } = useGetUserDetails();
  if (isLoading || !user) return <Loader />;

  return (
    <Box>
      <Text fontSize="2rem" as="p" textStyle="p">
        Welcome: {user.email}
      </Text>
      <Button onClick={() => signOut()}>Sign Out</Button>
    </Box>
  );
};

HomePage.auth = true; // 类型检查通过

方法2：全局扩展React组件类型 #

如果不想每个页面都用自定义类型，可以全局扩展React.FC的类型，让所有函数组件都支持auth属性：

1. 在项目根目录创建types/react.d.ts文件（如果已存在则直接编辑）
2. 添加以下代码：

import 'react';

declare module 'react' {
  interface FunctionComponent {
    auth?: boolean;
  }
}

3. 确保tsconfig.json中包含这个类型文件（通常include字段会覆盖types目录，无需额外配置）

之后所有React.FC组件都可以直接添加auth属性，不会触发类型错误。

方法3：放弃React.FC，直接定义组件 #

如果不想修改类型，也可以不用React.FC声明组件，直接定义函数后添加属性：

// 直接定义组件函数，不指定React.FC类型
export const HomePage = () => {
  const { user, isLoading } = useGetUserDetails();
  if (isLoading || !user) return <Loader />;

  return (
    <Box>
      <Text fontSize="2rem" as="p" textStyle="p">
        Welcome: {user.email}
      </Text>
      <Button onClick={() => signOut()}>Sign Out</Button>
    </Box>
  );
};

// 给组件添加auth属性，此时TypeScript会自动推断类型
HomePage.auth = true;

这种方式利用TypeScript的类型推断，不需要显式声明组件类型，也能避免错误。

补充说明 #

你的_app.tsx中CustomAppProps的定义是正确的，已经声明了Component包含可选的auth属性，所以只要页面组件的类型能匹配，就可以正常在MyApp中判断是否需要包裹Auth组件。

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