React/Next.js中CurvedContainer组件TypeScript类型错误求助：is not assignable to type 'IntrinsicAttributes'

Let's break down exactly what's causing this TypeScript error and walk through the fixes step by step.

First: The Obvious (But Critical) Typo #

Looking at your usage code, you're rendering <Container> but your component is named CurvedContainer. TypeScript doesn't recognize Container as your custom component, so it treats it like an unknown HTML element—hence the error about children not existing on IntrinsicAttributes. That's an easy fix right there.

Second: Fixing the Props Type Definition #

Your current Props type has two issues that contribute to the error:

1. You're defining children as JSX.Element, which only accepts a single React element. React's standard for children is React.ReactNode, which supports multiple elements, text, null, and more.
2. The [defaultParam: string]: any index signature overrides TypeScript's ability to properly infer native HTML element properties (like className or style) for your container div. Instead, we should extend the native div attributes directly.

Corrected Component Code #

Here's the revised CurvedContainer with all fixes applied:

import Image from "next/image";
import curveImage from "/public/curve.png";
import curveReverseImage from "/public/curve-reverse.png";
import curveImageBlack from "/public/curve-black.png";
import curveReverseImageBlack from "/public/curve-reverse-black.png";
import type React from "react";

// Extend native div attributes + our custom props
type Props = React.HTMLAttributes<HTMLDivElement> & {
  curveTop?: "white" | "black" | "none";
  curveBottom?: "white" | "black" | "none";
};

export default function CurvedContainer({ 
  children, 
  curveTop = "white", 
  curveBottom = "white", 
  ...rest 
}: Props) {
  return (
    <div {...rest} className={`${rest.className} flex flex-col`}>
      {curveTop !== "none" && (
        <div className="curveTop" style={{ marginTop: -1 }}>
          <Image 
            height="250" 
            alt="top curve" 
            src={curveTop === "white" ? curveReverseImage : curveReverseImageBlack} 
          />
        </div>
      )}
      {children}
      {curveBottom !== "none" && (
        <div className="curveTop -mb-2">
          <Image 
            height="250" 
            alt="bottom curve" 
            src={curveBottom === "white" ? curveImage : curveImageBlack} 
          />
        </div>
      )}
    </div>
  );
}

Corrected Usage Code #

Make sure to use the correct component name:

<CurvedContainer className="none" curveTop="white" curveBottom="none" >
  <div className="flex flex-row items-center justify-center p-8">
    <a href="#" className={`bg-black text-white font-bold tracking-wider text-sm text-center uppercase rounded-full px-8 py-2 shadow-lg `} type="button">
      Saiba Mais
    </a>
  </div>
</CurvedContainer>

Why This Works #

1. Component Name Match: TypeScript now recognizes you're using your custom CurvedContainer component, not an unknown HTML element.
2. Proper Props Inheritance: By extending React.HTMLAttributes<HTMLDivElement>, we get all native div properties (including children as React.ReactNode) out of the box, plus our custom curveTop/curveBottom props.
3. Flexible Children Type: React.ReactNode supports all valid React child content, making your component more robust.

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