如何修复TS2739错误：Element[]缺少ReactElement的type、props、key属性

安全阿岳

2026-8-8

解决React+TypeScript中的TS2739错误：Element[]缺少ReactElement属性

问题描述

在React+TypeScript项目中反复遇到TS2739错误：类型'Element[]'缺少类型'ReactElement'的type、props、key属性，相关代码如下：

类型定义与数据

export interface IHome {
  heading: string;
  title: string;
  description: string;
  features: { description: string; title: string }[];
  imgUrl: string;
  testimonial: { role: string; quote: string; name: string; company: string; imgSrc: string };
  bgColor?: string;
}

export const home: IHome[] = [
  {
    heading: 'test',
    title: 'test',
    description: 'test',
    features: [
      { title: 'test', description: 'test' },
      { title: 'test', description: 'test' },
      { title: 'test', description: 'test' },
    ],
    imgUrl: 'test.png',
    testimonial: {
      name: 'test',
      role: 'test',
      company: 'test',
      quote: 'test',
      imgSrc: 'images/test.jpg',
    },
    bgColor: 'bg-gray-50',
  },
];

Home页面组件

const Home: NextPage = () => {
  return (
    <>
      <Layout>
        <Navbar />
        <Hero />
        <LogoCloud />
        {home.map((item, index) => (
          <Features
            key={index}
            heading={item.heading}
            title={item.title}
            description={item.description}
            features={item.features}
            imgUrl={item.imgUrl}
            bgColor={item.bgColor}>
            <Testimonial
              key={index}
              name={item.testimonial.name}
              role={item.testimonial.role}
              company={item.testimonial.company}
              imgSrc={item.testimonial.imgSrc}
              quote={item.testimonial.quote}/>
          </Features>
        ))}
        <FeaturesSummary />
        <FooterCta />
        <Footer />
      </Layout>
    </>
  );
};

Features组件（错误根源）

import * as React from 'react';
import { JSXElementConstructor, ReactElement } from 'react';

export default function Features({
  heading,
  title,
  description,
  features,
  imgUrl,
  children,
  bgColor,
}: {
  heading: string;
  title: string;
  description: string;
  features: { title: string; description: string }[];
  imgUrl: string;
  children?: ReactElement<React.ReactNode, string | JSXElementConstructor<unknown>>;
  bgColor?: string;
}) {
  const bgStyle = `relative ${bgColor} py-16 sm:pt-24 lg:py-16`;
  return (
    <section id="analytics">
      <div className={bgStyle}>
        <div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
          <div>
            <h2 className="text-lg font-medium lg:font-semibold text-sky-500">{heading}</h2>
            <p className="mt-2 text-3xl font-medium lg:font-bold tracking-tight text-gray-900 sm:text-4xl">{title}</p>
            <p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">{description}</p>
          </div>
        </div>
        <div className="relative overflow-hidden">
          <div aria-hidden="true" className="absolute inset-x-0 top-0 h-48" />
          <div className="relative">
            <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
              <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
                {features.map((feature, key) => (
                  <div className="py-6" key={key}>
                    <h2 className="text-2xl font-bold tracking-tight text-gray-900">{feature.title}</h2>
                    <p className="mt-4 text-lg text-gray-500">{feature.description}</p>
                  </div>
                ))}
                <div className="mt-6">
                  <a
                    href="#"
                    className="inline-flex rounded-md border border-transparent bg-sky-300 px-6 py-3 text-xl
                      font-medium text-black shadow-sm xl:font-bold hover:bg-sky-200 focus:outline-none"
                  >
                    Get started
                  </a>
                </div>
              </div>
              <div className="mt-12 sm:mt-16 lg:mt-0 flex items-center">
                <div className="pl-4 md:-mr-48 sm:pl-6 mr-4 md:-mr-16 lg:px-0 lg:m-0">
                  <img className="w-full rounded-xl" src={imgUrl} alt={description} />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>{children}</div>
      </div>
    </section>
  );
}

Testimonial组件

export default function Testimonial({
  name,
  role,
  company,
  imgSrc,
  quote,
}: {
  name: string;
  role: string;
  company: string;
  imgSrc: string;
  quote: string;
}) {
  return (
    <section className="overflow-hidden">
      <div className="relative mx-auto max-w-7xl px-4 pt-20 pb-12 sm:px-6 lg:px-8 lg:py-20">
        <div className="relative lg:flex lg:items-center">
          <div className="hidden lg:block lg:flex-shrink-0">
            <img className="h-64 w-64 rounded-full" src={imgSrc} alt={`${name}, ${company}`} />
          </div>

          <div className="relative lg:ml-10">
            <svg
              className="absolute top-0 left-0 h-36 w-36 -translate-x-8 -translate-y-24 transform text-gray-200 opacity-50"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 144 144"
              aria-hidden="true"
            >
              <path
                strokeWidth={2}
                d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"
              />
            </svg>
            <blockquote className="relative">
              <div className="text-xl font-medium leading-8 text-gray-900">
                <p>{quote}</p>
              </div>
              <footer className="mt-8">
                <div className="flex">
                  <div className="flex-shrink-0 lg:hidden">
                    <img className="h-12 w-12 rounded-full" src={imgSrc} alt={`${name}, ${company}`} />
                  </div>
                  <div className="ml-4 lg:ml-0">
                    <div className="text-base font-medium text-gray-900">{name}</div>
                    <div className="text-base font-medium text-gray-500">
                      {role}, {company}
                    </div>
                  </div>
                </div>
              </footer>
            </blockquote>
          </div>
        </div>
      </div>
    </section>
  );
}

错误原因

TS2739错误的核心是类型不匹配：

Features组件将children的类型严格定义为ReactElement，仅接受单个React元素作为子组件。
但React中组件的子节点支持多种形式：单个元素、元素数组、文本、null/undefined等，这些合法形式都被包含在React.ReactNode类型中。
当通过home.map渲染多个Features组件时，这些组件组成的数组作为Layout的子节点，若Layout的children类型也被限制为单个ReactElement，就会触发类型错误；后续若给Features传递多个子元素，同样会报错。

最佳修复方案

修改Features组件的children类型为React.ReactNode，这是React官方推荐的子节点类型，兼容所有合法的子元素形式：

import * as React from 'react';

export default function Features({
  heading,
  title,
  description,
  features,
  imgUrl,
  children,
  bgColor,
}: {
  heading: string;
  title: string;
  description: string;
  features: { title: string; description: string }[];
  imgUrl: string;
  children?: React.ReactNode; // 修改此处类型
  bgColor?: string;
}) {
  const bgStyle = `relative ${bgColor} py-16 sm:pt-24 lg:py-16`;
  // 组件内部代码保持不变
  return (
    // ...原组件JSX结构
  );
}

可选优化（严格场景）

若确定Features组件只会接收单个子元素，可将类型改为React.ReactElement | undefined，但这种限制较严格，仅适用于明确需求的场景：

children?: React.ReactElement;

验证修复

修改类型后，TypeScript会正确识别所有合法的子节点形式，TS2739错误将消失。

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

如何修复TS2739错误：Element[]缺少ReactElement的type、props、key属性

问题描述 #

类型定义与数据 #

Home页面组件 #

Features组件（错误根源） #

Testimonial组件 #

错误原因 #

最佳修复方案 #

可选优化（严格场景） #

验证修复 #