Next.js页面default导出无效：AboutUsProps类型错误排查与解决

• 在Next.js的App Router规则里，page.tsx的默认导出组件不允许接收必填的自定义props，框架不会为页面组件传递这类外部属性。
• 你的代码中AboutUsProps定义了必填的className字段，页面组件强制要求传入该属性，但构建时框架无法提供这个值，直接触发类型校验失败。

提供两种可行方案，按需选择：

方案一：将className设为可选属性 #

修改类型定义，把className标记为可选字段，同时给组件参数设置默认值：

import Team from "@/components/AboutUs/Team";
import React from "react";

// 用?标记为可选属性
type AboutUsProps = {
    className?: string;
};

// 给参数设置默认空字符串
const AboutUs = ({ className = "" }: AboutUsProps) => {
    return (
        <div className={`${className} flex flex-row max-w-4xl mx-auto py-24 gap-4`}>
            <div className="gap-4 flex flex-col mt-4">
                <h1 className={`text-6xl font-medium`}>Officers</h1>
                <h2 className={`text-3xl text-gray-800 font-light`}>
                    The great people <br /> behind the organization
                </h2>
            </div>

            <div className="flex flex-col gap-4">
                <Team committee="Core" />
                <Team committee="Academics Committee" />
                <Team committee="Research Committee" />
            </div>
        </div>
    );
};

export default AboutUs;

方案二：移除自定义的className props #

如果不需要从外部传入类名，直接在组件内部定义完整类名即可：

import Team from "@/components/AboutUs/Team";
import React from "react";

// 移除props定义
const AboutUs = () => {
    return (
        <div className="flex flex-row max-w-4xl mx-auto py-24 gap-4">
            <div className="gap-4 flex flex-col mt-4">
                <h1 className={`text-6xl font-medium`}>Officers</h1>
                <h2 className={`text-3xl text-gray-800 font-light`}>
                    The great people <br /> behind the organization
                </h2>
            </div>

            <div className="flex flex-col gap-4">
                <Team committee="Core" />
                <Team committee="Academics Committee" />
                <Team committee="Research Committee" />
            </div>
        </div>
    );
};

export default AboutUs;

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