React TS报错：FormField无法作为JSX组件，返回类型void无效

你创建了FormField组件以简化代码、避免冗余，并将其导入到登录表单login.tsx中，但出现TypeScript错误：

'FormField' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786)

相关代码如下：

login.tsx #

import { Layout } from "~/components/layout";
import { FormField } from "~/components/form-field";
import { useState } from "react";

export default function Login() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

  // 输入变化时更新表单数据
  const handleInputChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    field: string
  ) =>
    setFormData((form) => ({
      ...form,
      [field]: event.target.value,
    }));

  return (
    <Layout>
      <div className="h-full flex justify-center items-center flex-col gap-y-4">
        <form className="rounded-2xl bg-gray-200 p-6 w-96">
          <FormField
            htmlFor="email"
            label="Email"
            value={formData.email}
            onChange={(e) => handleInputChange(e, "email")}
          />
        </form>
      </div>
    </Layout>
  );
}

form-field.tsx #

import { useState, useEffect } from 'react'
interface FormFieldProps {
    htmlFor: string,
    label: string,
    type?: string,
    value: any,
    onChange?: (...args: any) => any,
    error?: string
}

export function FormField({
    htmlFor,
    label,
    type = "text",
    value,
    onChange = () => { },
    error = ""

}: FormFieldProps) {
    const [errorText, setErrorText] = useState(error)

    useEffect(() => {
        setErrorText(error)
    }, [error])

    return
    <>
        <label htmlFor={htmlFor} className="text-blue-600 font-semibold">{label}</label>
        <input onChange={e => {
            onChange(e)
            setErrorText('')
        }} type={type} id={htmlFor} name={htmlFor} className="w-full p-2 rounded-xl my-2" value={value} />
        <div className="text-xs font-semibold text-center tracking-wide text-red-500 w-full">
            {errorText || ''}
        </div>
    </>
}

问题原因 #

JavaScript的**自动分号插入(ASI)**机制会在单独成行的return语句后自动添加分号，导致函数提前返回undefined（TypeScript将其识别为void类型），没有返回有效的JSX元素。

解决方法 #

将return与JSX片段放在同一行，或者用括号包裹JSX内容（推荐后者，彻底避免ASI问题）：

修正后的form-field.tsx核心代码：

export function FormField({
    htmlFor,
    label,
    type = "text",
    value,
    onChange = () => { },
    error = ""

}: FormFieldProps) {
    const [errorText, setErrorText] = useState(error)

    useEffect(() => {
        setErrorText(error)
    }, [error])

    // 用括号包裹JSX，避免自动分号插入
    return (
        <>
            <label htmlFor={htmlFor} className="text-blue-600 font-semibold">{label}</label>
            <input onChange={e => {
                onChange(e)
                setErrorText('')
            }} type={type} id={htmlFor} name={htmlFor} className="w-full p-2 rounded-xl my-2" value={value} />
            <div className="text-xs font-semibold text-center tracking-wide text-red-500 w-full">
                {errorText || ''}
            </div>
        </>
    )
}

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