Reactjs 类型'；FC<；IProps>'；不可分配给类型

目前我正在将TypeScript集成到我的React项目中，我遇到了一个问题。
错误是：

HeaderContainer组件是：

import React, {useEffect, useMemo, useState} from "react";

import {useSelector} from "react-redux";

import HeaderUI from "../ui/HeaderUI";
import LogoContainer from "../../common/Logo/functional/LogoContainer";
import BalanceInformationContainer from "./BalanceInformation/functional/BalanceInformationContainer";
import RenderEmptyContainer from "../../common/RenderEmpty/functional/RenderEmptyContainer";
import AccountContainer from "./Account/functional/AccountContainer";

import {getHeaderViewUserSelector} from "../../../redux/user/userSelectors";

import styles from "./Header.module.css";

interface OptionProps {
    className?: string,
    target?: string,
    href?: string,
}

interface ILogoProps {
    className: string,
    target: string,
    href: string,
}

interface IBalanceInformationProps {
    balance_wdx: number,
    wdxPrice: number,
    usdtPrice: number,
}

interface IAccountProps {
    username: string,
}

export type HeaderOptionType = {
    id: number,
    component: React.FC<ILogoProps | IBalanceInformationProps | IAccountProps | {}>,
    props: OptionProps,
}

const HeaderContainer: React.FC = () => {
    const user = useSelector(getHeaderViewUserSelector);

    const headerOptions = useMemo<HeaderOptionType[]>(() => ([
        {
            id: 0, component: LogoContainer, props: {
                className: styles.Logo,
                target: "_blank",
                href: "http://wordlex.finance/"
            }
        },
        {id: 1, component: RenderEmptyContainer, props: {}},
        {
            id: 2, component: BalanceInformationContainer, props: {
                balance_wdx: user ? user.balance_wdx : 0,
                wdxPrice: user ? user.wdxPrice : 0,
                usdtPrice: user ? user.usdtPrice : 0
            }
        },
        {id: 4, component: AccountContainer, props: {username: user ? user.username : "Loading..."}},
    ]), [user]);

    return <HeaderUI headerOptions={headerOptions} classes={styles}/>;
}

export default HeaderContainer;

import React，{useffect，usemo，useState}来自“React”；
从“react redux”导入{useSelector}；
从“./ui/HeaderUI”导入HeaderUI；
从“../../common/Logo/functional/LogoContainer”导入LogoContainer；
从“/BalanceInformation/functional/BalanceInformationContainer”导入BalanceInformationContainer；
从“../../common/rendermpty/functional/rendermptycontainer”导入rendermptycontainer；
从“/Account/functional/AccountContainer”导入AccountContainer；
从“../../../redux/user/userSelectors”导入{GetHeaderServiceWUserSelector}”；
从“/Header.module.css”导入样式；
界面选项道具{
类名？：字符串，
目标？：字符串，
href？：字符串，
}
接口ILogoProps{
类名：string，
目标：字符串，
href:string，
}
界面信息道具{
余额（wdx）：数字，
wdxPrice:数字，
USDT价格：数字，
}
界面道具{
用户名：string，
}
导出类型HeaderOptionType={
身份证号码：，
组件：React.FC，
道具：选择道具，
}
const HeaderContainer:React.FC=（）=>{
const user=useSelector（GetHeaderServiceWUserSelector）；
常数头选项=使用备注（（）=>([
{
id:0，组件：LogoContainer，道具：{
类名：样式。徽标，
目标：“_blank”，
href:“http://wordlex.finance/"
}
},
{id:1，组件：RenderEmptyContainer，props:{}，
{
id:2，组件：余额信息容器，道具：{
balance_wdx:user？user.balance_wdx:0，
wdxPrice:user？user.wdxPrice:0，
usdtPrice:user？user.usdtPrice:0
}
},
{id:4，组件：AccountContainer，props:{username:user？user.username:“正在加载…”}，
])，[用户]；
返回；
}
导出默认HeaderContainer；

在Logo的组件IProps中，我与ILogoProps界面中的组件相同。
我认为错误在那里：
组件：React.FC

LogoContainer是（四个组件之一）：

从“React”导入React；
从“./ui/LogoUI”导入LogoUI；
接口IProps{
href:string，
类名？：字符串，
目标？：字符串，
}
const LogoContainer:React.FC=（道具）=>{
返回；
}
导出默认标识容器；

---

请您描述一下问题出在哪里？

在您的

IProps

中，

className

和

target

道具是可选的，但在

ilogrops

中，它们是必需的。请把它们做得一模一样

---

另外，通常最好不要尽可能多地复制代码，因此更好的解决方案是在根级文件夹中添加一个

interfaces.ts

文件，例如，

constants

或

config

，并一次性定义接口并在多个位置重复使用。

ok，如果我为接口制作interfaces.ts。如何使接口名称唯一？例如，如果我在不同的目录中有两个按钮组件，我如何区分它？如果你有同名的不同组件，你很可能也有不同的接口，所以你可以在每个组件中定义接口。只能在

interfaces.ts

文件中定义可重用接口。好的，谢谢，明白了。

import React from "react";

import LogoUI from "../ui/LogoUI";

interface IProps {
    href: string,
    className?: string,
    target?: string,
}

const LogoContainer: React.FC<IProps> = (props) => {
    return <LogoUI {...props}/>;
}

export default LogoContainer;