我有一个功能组件从另一个功能组件接收 prop 。我在接收组件上有一个接口，该接口也包含一个接口，但当我登录控制台时，此接口总是“未定义”。但是，下面的 prop 值包含我希望填充到我的比赛接口中的数据。我的组件是：

import React, { useState } from 'react';
import { ICompetition } from '../interfaces/ICompetition';

interface CompetitionProps {
   competition: ICompetition;
}

function Competition(props: CompetitionProps) {
    console.log(props);
    console.log(props.competition);
    return (
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div id={props.competition.competitionId.toString()} className="text-left" style={{minWidth: 0, textOverflow: 'ellipsis', overflow: 'hidden'}}>                            
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Competition;

我使用下面组件中的spread操作符将数据发送到此组件：

import React, { useEffect, useState, } from 'react';
import "../App.css";
import { ICompetition } from '../interfaces/ICompetition';
 import Competition from './Competition';

interface HomeProps {
    bookmakerid: string | null;
}

function Home(props: HomeProps) {
    const [compList, setData] = useState<ICompetition | null>(null);
    const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);

    useEffect(() => {
        fetch("http://localhost:5242/Competitions?bid=" + props.bookmakerid, { method: "POST" })
            .then(response => {
                if (response.ok) {
                    //console.log(response);
                    return response.json();
                }
            })
            .then(data => {
                 setData(data);
            })
            .catch(err => {
                setError(err)
            });
    }, []);
    console.log(compList);
    return (
    <section className="section section-variant-1 bg-gray-100">
        <div className="isotope-item" data-filter="football">
            <div className="sport-table">
                <div className="sport-table-tr">

                    <div id="runnerContainer" className="carousel-inner">
                        {compList && compList instanceof Array && compList.map((comp) => (                                
                            <Competition competition={...comp} key={comp.competitionId } />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    </section>
);
}

export default Home;

我的ICetition接口定义如下

export interface ICompetition {
    competitionId: number;
    bookmakerId: number;
    competitionName: string;
    sportId: number;
    lastUpdated: Date;    
    venue: string;
    competitionDate: Date;
    downloadable: boolean;
    displayHead: boolean;
    headerText: string;
    competitionStatus: number;    
    sortOrder: number;
    errorCode: string;
}

任何关于我如何让这个工作的帮助都将不胜感激。