React组件传参遇VSCode类型错误：Property 'declaration'不存在于组件属性

这个错误本质是TypeScript的类型检查在起作用——你的BinFormatDeclarationView组件没有明确声明它接受declaration、Redux state、crude这些props的类型，所以TS认为你传递的属性不在组件允许的props范围内，尽管代码运行没问题，但TS会抛出类型错误。

下面是具体的解决步骤，分组件类型来处理：

1. 先为组件Props定义明确的TypeScript类型 #

首先你需要为BinFormatDeclarationView的props创建一个类型（接口或类型别名），把需要接收的所有属性都包含进去，比如：

// 先定义declaration的具体类型，根据你的实际数据结构编写
interface Declaration {
  id: string;
  fieldName: string;
  // 这里补充declaration的其他属性
}

// 定义组件的Props类型
interface BinFormatDeclarationViewProps {
  declaration: Declaration;
  // 给Redux根状态定义类型，避免用any
  reduxState: RootState; // 假设RootState是你Redux store的根状态类型
  crude: string; // 替换成crude的实际类型，比如number、自定义类型等
  // 其他需要传递的props也一起添加进来
}

2. 根据组件类型应用这个Props类型 #

情况一：类组件

如果BinFormatDeclarationView是类组件，需要让它继承React.Component<BinFormatDeclarationViewProps>，而不是默认的无类型Component：

import React, { Component } from 'react';

class BinFormatDeclarationView extends Component<BinFormatDeclarationViewProps> {
  render() {
    // 现在可以安全使用this.props中的所有属性，TS不会报错
    const { declaration, reduxState, crude } = this.props;
    return (
      // 组件渲染内容
    );
  }
}

情况二：函数组件

如果是函数组件，直接给参数指定类型，或者用React.FC（React.FunctionComponent）：

// 方式一：直接指定参数类型
const BinFormatDeclarationView = (props: BinFormatDeclarationViewProps) => {
  const { declaration, reduxState, crude } = props;
  return (
    // 组件渲染内容
  );
};

// 方式二：使用React.FC
const BinFormatDeclarationView: React.FC<BinFormatDeclarationViewProps> = (props) => {
  const { declaration, reduxState, crude } = props;
  return (
    // 组件渲染内容
  );
};

3. 结合Redux connect的情况（如果使用了connect） #

如果你是通过connect注入Redux state的，需要确保mapStateToProps的返回值类型和组件Props匹配，或者用connect的泛型明确指定类型：

import { connect } from 'react-redux';

// 假设RootState是你的Redux根状态类型
interface RootState {
  // 根状态的具体属性
}

const mapStateToProps = (state: RootState) => ({
  reduxState: state,
  // 也可以只取state的部分模块，比如state.binFormat
});

// 使用connect泛型明确各部分类型
export default connect<
  Pick<BinFormatDeclarationViewProps, 'reduxState'>, // mapStateToProps返回的props类型
  {}, // mapDispatchToProps的类型，无则写{}
  Omit<BinFormatDeclarationViewProps, 'reduxState'>, // 组件接收的其他props（如declaration、crude）
  RootState // Redux根状态类型
>(mapStateToProps)(BinFormatDeclarationView);

为什么要这么做？ #

虽然代码能运行，但TypeScript的类型检查是为了提前发现潜在bug，同时提供更友好的开发提示。明确props类型后，不仅能消除这个错误，还能避免你不小心传递错误类型的属性给组件，让代码更健壮。

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