Next.js执行npm run build时出现未用TS却报TypeScript错误问题

问题说明 #

项目未引入TypeScript，国际化功能本地运行正常，但执行npm run build时出现TypeScript类型报错。将Layout.jsx改为tsx文件后问题仍存在，错误信息翻译如下：

类型错误：类型'OmitWithTag<{ children: any; lang: any; }, keyof LayoutProps, "default">'不满足约束'{ [x: string]: never; }'。
属性'lang'与索引签名不兼容。
类型'any'不能赋值给类型'never'。

涉及的Layout组件代码：

import Sidebar from "./Sidebar/page";
import SettingFloatButton from "./Button/SettingFloatButton";
import Navbar from "./Navbar/page";
const Layout = ({ children, lang }) => {
  return (
    <div>
      <div className="relative flex min-h-screen bg-gray-50 divide-x">
        <div className="min-h-full hidden bg-white xl:block lg:block md:block">
          <Sidebar lang={lang} />
        </div>
        <div className="flex flex-col flex-1">
          <Navbar lang={lang} />
          <div className="p-5 xl:p-10">
            <main>{children}</main>
            <SettingFloatButton lang={lang} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Layout;

可行解决方案 #

方案1：直接关闭Next.js的TypeScript类型检查 #

因为项目本身不使用TypeScript，可在next.config.js中配置忽略构建时的TS错误：

/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
};

module.exports = nextConfig;

方案2：为Layout组件添加明确类型声明（若计划迁移TS） #

如果后续打算引入TypeScript，给Layout组件的props定义清晰的类型：

import Sidebar from "./Sidebar/page";
import SettingFloatButton from "./Button/SettingFloatButton";
import Navbar from "./Navbar/page";

// 根据实际语言类型调整，比如'en' | 'zh-CN'
type LayoutProps = {
  children: React.ReactNode;
  lang: string;
};

const Layout = ({ children, lang }: LayoutProps) => {
  return (
    <div>
      <div className="relative flex min-h-screen bg-gray-50 divide-x">
        <div className="min-h-full hidden bg-white xl:block lg:block md:block">
          <Sidebar lang={lang} />
        </div>
        <div className="flex flex-col flex-1">
          <Navbar lang={lang} />
          <div className="p-5 xl:p-10">
            <main>{children}</main>
            <SettingFloatButton lang={lang} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Layout;

方案3：排查国际化方案的props传递冲突 #

错误本质是Next.js App Router对组件props的类型校验机制，和你传递lang属性的方式冲突：

• 若通过路由参数或generateStaticParams传递lang，确保参数类型符合Next.js的要求；
• 若使用第三方国际化库（如next-intl），严格按照官方文档配置类型，避免props类型不匹配。

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