'StackProps<"Detail">' 类型上不存在属性 'params'

Question

我在尝试从 route.params 检索数据时遇到错误，这样说会出错。 route 的类型应该是什么。

类型'StackProps'上不存在属性'params'

虽然我已经为route 定义了类型，但它仍然给我错误。这是我的代码

RouteParamList.tsx

import { StackNavigationProp } from "@react-navigation/stack";
import { RouteProp } from "@react-navigation/native";
export type RouteParamList = {
  Home: undefined;
  Detail: { productId: number };
};
export type StackProps<T extends keyof RouteParamList> = {
  navigation: StackNavigationProp<RouteParamList, T>;
  route: RouteProp<RouteParamList, T>;
};

DetailScreen.tsx

interface DetailScreenProps {
  route: StackProps<"Detail">;
  
}
export function DetailScreen({ route }: DetailScreenProps) {
  
  const { productId }: { productId: number } = route.params; <-- I am getting error here
  const dataDisplay = data.find((el, index) => {
    if (el.id !== productId) {
      return undefined;
    } else {
      return el.id === productId;
    }
  });

Answer 1

我认为目前设置接口的方式，您需要访问route.route.params。请注意，DetailScreenProps.route 的类型为 StackProps<"Detail">，它也有一个属性 route。

除了使用route.route.params，您还可以考虑像这样更改界面：

interface DetailScreenProps extends StackProps<"Detail"> { }