TS2322错误求助：Question类型无法赋值给ReactNode

你遇到的错误核心原因很直接：你试图直接渲染一个Question类型的对象，但React只能渲染符合ReactNode类型的内容（比如字符串、数字、JSX元素等），而不是整个对象。

看你的代码，teamProfile.teamContext.question是一个Question接口实例，包含question、answer等多个属性，直接把它放进<span>里，TypeScript会检测到类型不匹配。

修复方法 #

直接访问Question对象里的字符串属性question即可，因为你的Question接口定义里明确有这个字段：

修改渲染部分的关键代码：

<span className="bold blue">{teamProfile.teamContext.question.question}</span>

修改后的完整组件代码 #

export default class TeamProfile extends Component<{ company: Organization }> {
    render() {
        const { company } = this.props;
        const { teamProfile } = company.interview;

        return (
            <div className="all-100">
                <p className="section-heading bold font-22" id="ft-team-profile">
                    Team Profile
                </p>
                <div className="all-100 padding-left-30 align-left">
                    {teamProfile.teamContext.answer && (
                        <div className="all-100 align-left padding-bottom-10">
                            {/* 这里改成访问question属性 */}
                            <span className="bold blue">{teamProfile.teamContext.question.question}</span>
                            <TeamContextAnswer answer={teamProfile.teamContext.answer} className="ft-answer" />
                        </div>
                    )}
                </div>
            </div>
        );
    }
}

如果之后需要渲染Question里的其他内容（比如description或details），也要遵循同样的规则——明确访问对应的属性，不能直接渲染整个对象。

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