使用TypeScript实例化React组件时无法设置属性的问题排查

你遇到的错误核心是Redux connect 泛型参数的顺序使用错误，导致TypeScript无法识别组件的自定义props（Name和Value）。

为什么会报错？ #

connect的泛型参数是有固定顺序的：

connect<StateProps, DispatchProps, OwnProps, RootState>(...)

• StateProps：组件从Redux store中获取的状态类型
• DispatchProps：组件需要的dispatch方法类型
• OwnProps：组件从父组件接收的自定义props类型
• RootState：Redux根状态的类型

在你的TourSpecProperty组件中，你把IOwnProps放到了第一个参数（StateProps）的位置，这就告诉TypeScript：Name和Value应该从Redux store中获取，而不是从父组件传入。但你的mapStateToProps返回的是空对象，TypeScript自然会认为这些属性不存在；同时你没有正确声明OwnProps，父组件传入Name时就会触发类型错误。

修复步骤 #

1. 修正TourSpecProperty的connect泛型与类型定义

调整泛型参数顺序，把IOwnProps放到正确的OwnProps位置，同时明确StateProps为空（因为你目前不需要从store取状态）：

import IRootState from "../../../redux/rootState";
import { connect } from "react-redux";
import * as React from "react";

// 组件从父组件接收的自定义props
interface IOwnProps {
  Name: string,
  Value: any
}

// 组件不需要从store获取状态，直接使用OwnProps作为组件props类型
const TourSpecProperty: React.SFC<IOwnProps> = (props) => {
  return (
    <div>
      <div> Name:{props.Name} </div>
      <div> Value:{props.Value} </div>
    </div>
  )
}

// mapStateToProps返回空，对应不需要从store取状态的场景
const mapStateToProps = (state: IRootState) => {
  return {};
}

// 正确的泛型顺序：StateProps, DispatchProps, OwnProps, RootState
export default connect<{}, {}, IOwnProps, IRootState>(mapStateToProps)(TourSpecProperty);

如果后续需要从store获取状态，只需要添加对应的StateProps接口，并更新泛型和mapStateToProps即可。

2. 在父组件中正确传递props

在TourSpecPropertiesSection中，遍历tourSpec属性时，要传入对应的Name和Value，同时处理SelectedTourSpec为null的情况：

const TourSpecPropertiesSection: React.SFC<IStateProps> = (props) => {
  const keys: string[] = getKeys(props.SelectedTourSpec);
  return (
    <div className="tour-spec-section">
      {/* 示例：传递测试值 */}
      <TourSpecProperty Name="Sample" Value="Test" />
      <h3>TourSpec Properties</h3>
      {/* 遍历属性并传递对应的值，用可选链避免null报错 */}
      {keys.map((property: string, index: number) => (
        <TourSpecProperty 
          key={index} 
          Name={property} 
          Value={props.SelectedTourSpec?.[property]} 
        />
      ))}
    </div>
  );
}

这里使用了可选链?.来安全访问SelectedTourSpec的属性，避免null导致的运行时错误。

额外提示 #

• 如果你当前不需要TourSpecProperty连接Redux，可以暂时移除connect，直接导出组件，后续需要时再添加连接，这样类型会更简单。
• 建议给Value指定更具体的类型（而不是any），这样TypeScript能提供更好的类型检查。

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