TypeScript报错：类型'FC<ProvidersProps>'不存在'children'属性

错误原因 #

你错误地将FC<ProvidersProps>作为组件的props类型传递给了函数参数。FC（FunctionComponent）本身是函数组件的类型，它代表一个接收指定Props并返回React元素的函数，而不是组件props的类型。当你把FC<ProvidersProps>作为props的类型时，相当于声明props是一个函数，而非包含children的对象，因此TypeScript会报错找不到children属性。

修复方案 #

方案1：直接使用Props接口作为参数类型 #

去掉FC对props类型的包裹，直接用定义好的ProvidersProps作为组件参数的类型：

'use client'
import React, { ReactNode } from 'react'
import { Toaster } from 'react-hot-toast'

interface ProvidersProps {
  children: React.ReactNode
}

export default function Providers(props: ProvidersProps) {
  return (
    <>
      <Toaster position="top-center" reverseOrder={false} />
      {props.children}
    </>
  )
}

方案2：使用FC类型定义组件整体 #

如果想保留FC的使用方式，应该将FC<ProvidersProps>作为组件函数的类型，而非参数类型：

'use client'
import React, { FC, ReactNode } from 'react'
import { Toaster } from 'react-hot-toast'

interface ProvidersProps {
  children: React.ReactNode
}

const Providers: FC<ProvidersProps> = (props) => {
  return (
    <>
      <Toaster position="top-center" reverseOrder={false} />
      {props.children}
    </>
  )
}

export default Providers

补充：在React 18+的TypeScript类型定义中，FC已经默认包含了children属性（类型为ReactNode | undefined），如果你不需要自定义children的类型，甚至可以简化ProvidersProps为空接口，直接使用FC即可。

内容的提问来源于stack exchange，提问作者Joe Robin A