Next.js 14项目中TypeScript编译器失效问题求助

搭建Next.js 14 + TypeScript v5项目后，TypeScript编译器无法正常检测类型错误。例如PropertyInformation组件未定义country和area的Props类型，编译器未给出任何报错提示。

组件代码 #

const PropertyInformation = ({country, area}) => {
  return (
    <Flex justify="unset" direction="row" columnGap={48} p={16}>
      <Flex align="center" direction="row" columnGap={16}>
        <Image src={building} alt="Logo" width={48} height={48} />{" "}
        <Text size="xl">a Flat</Text>
      </Flex>
      <Flex align="center" direction="row" columnGap={16}>
        <Image src={dimensions} alt="Logo" width={48} height={48} />{" "}
        <Text size="xl">{area} m2</Text>
      </Flex>
      <Flex align="center" direction="row" columnGap={16}>
        <Image src={location} alt="Logo" width={48} height={48} />{" "}
        <Text size="xl">{country}</Text>{" "}
      </Flex>
    </Flex>
  );
};
export default PropertyInformation;

tsconfig.json配置 #

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["app/", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "./theme/declarations.d.ts"],
  "exclude": ["node_modules"]
}

排查与解决步骤 #

1. 检查IDE（WebStorm）TypeScript配置 #

• 确保WebStorm使用项目本地安装的TypeScript版本：在设置>语言与框架>TypeScript中，将"TypeScript version"设置为"Node_modules"中的版本，避免全局/内置版本兼容问题。
• 启用实时错误检测：勾选"Enable TypeScript compiler"和"Use TypeScript service"，并将"Check for errors"设为"On every keystroke"。

2. 验证文件命名与检测范围 #

• 确认组件文件后缀为.tsx，而非.jsx/.js——仅TypeScript后缀文件会触发类型检测。
• 检查tsconfig.json的include数组，确保组件所在目录被覆盖。例如组件在components/下时，需添加"components/**/*.tsx"到列表。

3. 手动触发TypeScript编译 #

• 在终端执行npx tsc --noEmit，直接调用编译器检测。若终端输出类型错误，说明IDE配置存在问题；若无输出，需进一步检查tsconfig规则。

4. 清理缓存与依赖 #

• 删除.next文件夹和node_modules/.cache目录，清理Next.js缓存。
• 重新执行npm install，确保@types/react、@types/react-dom等类型依赖已正确安装且版本兼容。

5. 补充：显式定义组件Props类型（解决示例问题） #

要触发类型检测，需为组件显式定义Props类型，示例修改如下：

interface PropertyInformationProps {
  country: string;
  area: number | string;
}

const PropertyInformation = ({country, area}: PropertyInformationProps) => {
  // 组件内容不变
};
export default PropertyInformation;

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