TypeScript React项目connect包裹组件丢失latex_code属性报错如何解决

DevOps 小满

2026-9-28

问题原因

connect的第一个参数是mapStateToProps，作用是将Redux store中的状态映射为组件的内部注入属性，凡是被mapStateToProps返回的属性，TS都会自动标记为不需要外部手动传入的属性，因此导出的组件类型会通过Omit剔除这部分属性。你当前的updateTeXBox返回了latex_code，所以外部传入latex_code时就会触发类型报错。

同时你当前的updateTeXBox写法不符合mapStateToProps的规范：

mapStateToProps的第一个入参是Redux全局state，不是自定义的_latex_code参数
如果你原本的逻辑是要把latex_code作为外部传入的属性，就不应该把它放到mapStateToProps的返回值中

修复方案

方案1：`latex_code`需要从外部传入，不需要从Redux取

直接删除你写的updateTeXBox，connect第一个参数传null即可：

export default connect(null)(LaTeXBox);

修改后外部传入latex_code和extract两个属性就不会触发类型错误。

方案2：`latex_code`需要从Redux store取，不需要外部传入

先拆分组件props类型，修正mapStateToProps的写法：

// 拆分props类型：从store注入的属性 + 外部可传的属性
type StateProps = {
  latex_code: string
}
type OwnProps = {
  extract: (a: string)=>void
}
type LaTeXBoxProps = StateProps & OwnProps

// 修正mapStateToProps，第一个参数为全局store的state，按你实际的store结构取值
const mapStateToProps = (state: RootState): StateProps => {
  return {
    latex_code: state.latex_code // 替换为你store中对应字段的实际路径
  }
}

const LaTeXBox = (props : LaTeXBoxProps) => {
  // 原有组件逻辑保持不变
}

// 给connect传入泛型约束，明确三类props的类型
export default connect<StateProps, {}, OwnProps>(mapStateToProps)(LaTeXBox);

修改后外部只需要传入extract属性即可，latex_code会自动从store注入，不需要手动传。