Next.js项目中TypeScript未对函数、Props类型报错的问题求助

你的核心问题是TypeScript未对组件返回类型、Props等类型错误进行校验，比如示例中返回空函数的组件未触发报错。这主要是因为TypeScript严格模式未开启，加上ESLint配置冗余冲突导致的，以下是具体修复步骤：

1. 配置tsconfig.json（关键） #

TypeScript的类型校验规则由tsconfig.json控制，你没有提供这个文件，这是问题的核心。创建或修改项目根目录下的tsconfig.json，确保开启严格模式：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true, // 必须开启，强制所有严格类型检查规则
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve", // Next.js 13+ 推荐使用这个配置
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], // 确保包含所有需要校验的文件
  "exclude": ["node_modules"]
}

strict: true会启用noImplicitReturns、noImplicitAny、strictFunctionTypes等关键规则，这些规则会强制校验函数返回类型、参数类型等。

2. 修复ESLint配置的冗余与冲突 #

你的.eslintrc存在大量重复的extends配置和未启用的TypeScript解析器，导致规则冲突或不生效，修改如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  parser: '@typescript-eslint/parser', // 启用TypeScript解析器
  parserOptions: {
    ecmaVersion: 'latest',
    ecmaFeatures: { jsx: true },
    sourceType: 'module',
    project: './tsconfig.json' // 关联tsconfig，支持需要类型信息的ESLint规则
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'import',
    '@next/eslint-plugin-next',
    'simple-import-sort'
  ],
  extends: [
    'next/core-web-vitals',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'error',
    'import/no-duplicates': 'error',
    'import/no-unresolved': 'error',
    'import/named': 'error',
    semi: ['error', 'never'],
    'quote-props': ['error', 'as-needed'],
    'object-shorthand': ['error', 'always'],
    'no-new-object': 'error',
    'no-eval': 'error',
    'template-curly-spacing': ['error', 'never'],
    'prefer-template': 'error',
    quotes: ['error', 'single'],
    'react/jsx-filename-extension': ['warn', { extensions: ['.ts', '.tsx'] }],
    'default-param-last': 'error',
    'space-before-function-paren': ['error', { anonymous: 'always', named: 'always', asyncArrow: 'always' }],
    indent: ['warn', 2, { SwitchCase: 1, ignoredNodes: ['TSXElement', 'TSXElement > *'] }],
    'no-inline-comments': 'error',
    'no-var': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/no-danger': 'off',
    'react/jsx-indent': ['warn', 2],
    'react/no-this-in-sfc': 'error',
    'react/no-typos': 'error',
    'react/no-unused-state': 'error',
    'react/jsx-no-bind': ['error', { allowArrowFunctions: true, allowFunctions: true }],
    'no-useless-call': 'error',
    'no-useless-computed-key': 'error',
    'no-useless-concat': 'error',
    'no-useless-constructor': 'error',
    'no-useless-rename': 'error',
    'no-useless-return': 'error',
    camelcase: ['off', { properties: 'always', ignoreImports: false, ignoreGlobals: true, allow: ['org_code', 'cookies_jwtToken', 'auth_token'] }],
    'no-constant-condition': ['error', { checkLoops: false }],
    'no-console': ['error', { allow: ['warn', 'error'] }],
    'eol-last': ['error', 'always'],
    'no-underscore-dangle': 'off',
    'import/no-named-as-default': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'react-hooks/exhaustive-deps': 'off',
    '@next/next/no-img-element': 'error',
    '@next/next/no-sync-scripts': 'warn',
    '@next/next/no-css-tags': 'error',
    '@next/next/no-document-import-in-page': 'error',
    '@next/next/no-html-link-for-pages': 'error',
    'consistent-return': 'off',
    'simple-import-sort/imports': 'error',
    'simple-import-sort/exports': 'error',
    'no-multi-spaces': 'error',
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
    'keyword-spacing': ['error', { before: true, after: true }],
    'new-cap': ['error', { newIsCap: true, capIsNew: false }],
    'new-parens': 'error',
    'no-array-constructor': 'error'
  }
}

主要修改点：

• 启用@typescript-eslint/parser并关联tsconfig.json，让ESLint能使用TypeScript的类型信息
• 移除重复的extends配置，避免规则冲突
• 移除未使用的插件（如better-styled-components、jest）

3. 固定TypeScript版本 #

你的package.json中typescript使用了*，可能安装了与Next.js 13.0.6不兼容的版本，修改为固定兼容版本：

"typescript": "^4.9.4"

4. 验证修复 #

执行以下步骤确保配置生效：

1. 删除node_modules和package-lock.json
2. 重新安装依赖：npm install
3. 重启开发服务器：npm run dev
4. 检查你的示例组件代码，此时应该会触发类似Type '() => void' is not assignable to type 'FC<{}>'的类型错误

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