Javascript 使用材料UI中的HOC样式时，Typescript道具与组件道具不匹配

我有一个类组件，它用material ui中的HOC样式包装：

type State = {
    activeConversationID: number | null,
    openNewMessageBox: boolean,
    conversations: Conversation[] | null,
}

const styles = createStyles({
    messengerContainer: {
        width: "100%",
        height: "88vh",
        position: "relative",
        display: "flex",
    },
    floatingButton: {
        position: "absolute",
        background: "#4766B0",
        color: "#FFF",
        bottom: 20,
        left: 290,
    }
});

interface Props extends WithStyles<typeof styles> {
    conversations: fetchReturnType | WP_Error,
    classes: any,
}

class MessagesContainer extends Component<Props, State> {
    static contextType = ChatSocketContext;

    constructor(props, context) {
        super(props, context);

        this.state = {
            activeConversationID: null,
            openNewMessageBox: false,
            conversations: null,
        }
    }

    /** State functions */
    changeActiveConversation = (ID: number) => {
        this.setState({
            activeConversationID: ID,
        })
    }

    toggleNewMessageBox = (_: any, should_reload_page_after_submit: boolean = false) => {
        const { openNewMessageBox } = this.state;

        this.setState({
            openNewMessageBox: !openNewMessageBox,
        }, () => should_reload_page_after_submit ? window.location.reload() : null)
    }





    render() {

        const { classes } = this.props;

        return (
            <Paper className={classes.messengerContainer}>
                <Fab onClick={this.toggleNewMessageBox} aria-label="add" className={classes.floatingButton}>
                    <AddIcon />
                </Fab>
            </Paper>
        )
    }
}

export default withStyles(styles)(MessagesContainer);

类型状态={
activeConversationID:number | null，
openNewMessageBox:boolean，
对话：对话[]空，
}
const styles=createStyles({
信使集装箱：{
宽度：“100%”，
高度：“88vh”，
职位：“相对”，
显示：“flex”，
},
浮动按钮：{
位置：“绝对”，
背景：“4766B0”，
颜色：“FFF”，
底数：20，
左：290，
}
});
界面道具随样式扩展{
对话：fetchReturnType | WP|u错误，
类别：任何，
}
类MessagesContainer扩展组件{
静态contextType=ChatSocketContext；
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
activeConversationID:null，
openNewMessageBox:false，
对话：空，
}
}
/**国家职能*/
changeActiveConversation=（ID:number）=>{
这是我的国家({
activeConversationID:ID，
})
}
toggleNewMessageBox=（\u:any，应该在提交后重新加载页面：boolean=false）=>{
const{openNewMessageBox}=this.state；
这是我的国家({
openNewMessageBox:！openNewMessageBox，
}，（）=>是否应在提交后重新加载页面？window.location.reload（）：null）
}
render（）{
const{classes}=this.props；
返回(
)
}
}
导出默认样式（样式）（MessageContainer）；

一切似乎都很好，但当我将此组件导入页面文件时，当我尝试使用“对话”道具时，会出现以下错误：

类型“{conversations:fetchReturnType | WP_Error；}”不可分配给类型“IntrinsicattAttributes&Pick&StyledComponentProps&{children？：ReactNode；}”

属性“conversations”在类型“IntrinsicatAttributes&Pick&StyledComponentProps&{children？：ReactNode；}”上不存在

以下是我的“页面文件”供参考：

import React from 'react';
import { NextPage, NextPageContext } from "next";
import MessengerController from "../../api/controllers/Messenger/Messenger.controller";
import { fetchReturnType, WP_Error } from "../../api/controllers/types/Messenger.types";
import MessagesContainer from "../../components/Layout/Profile/MessagesContainer2";


const Messages: NextPage<{ conversations: fetchReturnType | WP_Error }> =
    ({ conversations }) => <MessagesContainer conversations={conversations} />;

Messages.getInitialProps = async (_: NextPageContext) => {
    const messenger = new MessengerController();
    const conversations = await messenger.fetchAll();

    return {
        conversations,
    }
}

export default Messages;

从“React”导入React；
从“下一步”导入{NextPage，NextPage context}；
从“../../api/controllers/Messenger/Messenger.controller”导入Messenger控制器；
从“../../api/controllers/types/Messenger.types”导入{fetchReturnType，WP_Error}”；
从“../../components/Layout/Profile/MessagesContainer2”导入MessagesContainer；
常量消息：下一页=
（{conversations}）=>；
Messages.getInitialProps=async（uuz:NextPageContext）=>{
const messenger=新的messenger控制器（）；
const conversations=等待messenger.fetchAll（）；
返回{
对话，
}
}
导出默认消息；

奇怪，因为没有风格，我没有错误。我经常使用样式，在这个特殊情况下，我想使用它，而不是使用带有钩子的功能组件。

您尝试过吗

export default withStyles<Props>(styles)(MessagesContainer);

导出默认样式（样式）（MessageContainer）；

或者也许你会发现更多的信息

const defaultExport = withStyles<Props>(styles)(MessagesContainer);
export default defaultExport:React.Component<Props>

constdefaultexport=with样式（样式）（messagecontainer）；
导出默认默认值导出：React.Component