Next.js向表单组件传递对象数组报map不存在错误的解决方法

Property 'map' does not exist on type 'NextPage<FormProps, FormProps>' 报错是多个代码错误共同导致的，核心问题如下：

• 导入路径笔误：formData的导入路径写为'..source/data'，缺少路径分隔符/，TypeScript无法正确定位到目标配置文件
• 导入方式错误：data.js里的formData是命名导出（export {formData}），代码里用了默认导入语法，TS解析模块失败后，错误将formData变量推导为NextPage<FormProps>函数类型，函数类型上不存在数组专属的map方法，直接触发该类型报错
• 附带的其他运行时/规范错误：
  • 自定义React组件用小写开头命名：loginForm首字母小写，JSX会把小写标签识别为原生HTML元素，无法正常渲染自定义组件
  • 普通UI组件误用NextPage类型：NextPage是Next.js专为路由页面设计的类型，不适合用在可复用表单项这类普通组件上
  • 配置文件用.js后缀：TS项目未开启allowJs时，导入JS文件会丢失类型校验，容易埋下隐式类型错误
  • 组件文件后缀错误：包含JSX语法的文件应该用.tsx后缀，否则TS无法正确解析JSX语法

按以下步骤修正代码即可正常运行：

1. 把表单配置文件改为TS文件（例如data.ts），补充明确类型，保持命名导出：

// 路径：项目目录/data/data.ts
export interface FormFieldConfig {
  name: string;
  type: string;
  placeholder: string;
  labelText: string;
}

export const formData: FormFieldConfig[] = [
  {
    name: 'username',
    type: 'text',
    placeholder: 'placeholder',
    labelText: 'User Name'
  },
  {
    name: 'password',
    type: 'password',
    placeholder: 'password',
    labelText: 'Password'
  }
]

2. 修正表单项组件：组件名改为大写开头，文件后缀改为.tsx，普通组件替换NextPage为通用组件类型，修正后代码：

// 路径：source/LoginForm.tsx
import type { FC } from 'react';

export interface FormProps {
  name: string;
  type: string;
  placeholder: string;
  labelText: string;
}

const LoginForm: FC<FormProps> = ({name, type, placeholder, labelText}) => {
  return (
    <div>
      <label>{labelText}</label>
      <input
        name={name} 
        type={type}
        placeholder={placeholder}
      />
    </div>
  )
}

export default LoginForm;

3. 修正页面文件的导入路径、导入语法、组件名引用，修正后代码：

// 路径：对应页面目录/LoginView.tsx
import type { NextPage } from 'next';
// 按实际目录层级调整路径，导入大写开头的组件
import LoginForm from '../source/LoginForm';
// 修正路径，命名导出需要用花括号导入，路径层级按自身项目结构调整
import { formData } from '../data/data';

const Login: NextPage = () => {
  return (
    <div className="container">
      {
        formData.map((field) => 
          <LoginForm key={field.name} {...field}/>
        )
      }
    </div>
  );
}

export default Login;

注意：如果项目目录结构和示例路径不一致，按照自身实际文件位置调整相对路径即可，保证路径能正确定位到目标文件。

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