Typescript 财产'；匹配'；不存在于类型'；{children？：ReactNode；}'；

我不知所措。我对typescript还是新手，我确实尝试了在其他线程上找到的几种建议解决方案，例如导入

RouteProps

或

RouteComponentProps

并将它们应用于

React.FC

，但是

匹配
，
参数
和
id
仍然不存在

我试图创建一些接口，但我不完全确定如何键入对象{}。因为
match
和
params
是对象，而
id
是字符串

下面是我正在使用的代码。任何意见都将不胜感激

const Cocktail: React.FC = (props) => {
  const { cocktail } = useSelector((state: StoreState) => state.cocktails);
  const dispatch = useDispatch();
  const { match: { params: { id }}} = props;

  useEffect(() => {
    dispatch(fetchCocktail(id));
  }, []);
  return (
    html elements...
  );
};

当您将react router道具
RouteComponentProps
添加到组件道具时，它知道您的道具包含一个属性
match
，该属性具有一个属性
params
，该属性是一个
对象。它还不知道
params
中存在哪些属性

仔细想想，param名称是由您在路由匹配字符串中放置的内容决定的，因此param名称是特定于路由器实现的

type
RouteComponentProps
采用类型参数
Params
，可用于指定匹配参数。您可以通过内联方式或通过为道具定义接口来完成此操作：

const Cocktail: React.FC<RouteComponentProps<{id: string}>> = (props) => {

const鸡尾酒：React.FC=（道具）=>{

或

接口MyParams{
id：字符串；
}
常量鸡尾酒：React.FC=（道具）=>{

现在，当您尝试访问
props.match.params
typescript上的属性时，您的IDE将知道这些属性是
id
，而不是其他任何属性。
我可以在稍后更仔细地了解这一点。一个选项是从路由器挂钩而不是从props获取值。但基本上，RouteProps、挂钩等都是通用的。他们不知道参数包含字符串属性id，除非您通过指定泛型来告诉它您的参数是什么。出于好奇，我可以通过创建以下接口来处理此问题。
interface Props{match:{params:{id:string；}；}；}
。很抱歉，我希望我可以在注释中使用多行文字；但是如果这也有效，是否有必要使用
RouteComponentProps
呢？这也很好。本质上，您是说您只需要一个prop，而不需要整个RouteComponentProps对象。
interface MyParams {
    id: string;
}

const Cocktail: React.FC<RouteComponentProps<MyParams>> = (props) => {