反应导航+；TypeScript错误：Type'；EventStackParams'；不满足约束'；记录<；字符串，对象|未定义>'；

我正在将TypeScript添加到我的React Native/React Navigation 5 Navigator，但在将

EventStackParams

添加到

createStackNavigator（）

时遇到问题

我已经看过了，StackOverflow和GitHub，但是没有运气。我做错了什么？下面是我的错误和代码

错误：

Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.

Index signature is missing in type 'EventStackParams'.ts(2344)

// Imports: TypeScript Types
import { EventStackParams } from '../types/types';

// React Navigation: Stack Navigators
const RootStack = createStackNavigator();
const EventsStack = createStackNavigator<EventStackParams>();

// Events Navigator
const EventsNavigator = () => (
  <EventsStack.Navigator initialRouteName="Events">
    <EventsStack.Screen
      name="Events"
      component={Events}
      options={{
        title: '',
        headerShown: false,
      }}
    />

    <EventsStack.Screen
      name="EventDetails"
      component={EventDetails}
      options={{
        title: '',
        headerShown: true,
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderBottomWidth: 0,
        },
      }}
    />
  </EventsStack.Navigator>
);

// TypeScript Type: Event
export interface Event {
  eventTitle: string,
  eventDescription: string | null,
  eventStreet: string,
  eventLocation: string,
  eventLatitude: number,
  eventLongitude: number,
  eventDateStart: number,
  eventDateEnd: number,
  eventTimeStart: string,
  eventTimeEnd: string,
};

// TypeScript Type: Event Stack Params
export interface EventStackParams {
  Events: undefined,
  EventDetails: {
    item: Event,
  },
};

---

更新：

Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.

Index signature is missing in type 'EventStackParams'.ts(2344)

// Imports: TypeScript Types
import { EventStackParams } from '../types/types';

// React Navigation: Stack Navigators
const RootStack = createStackNavigator();
const EventsStack = createStackNavigator<EventStackParams>();

// Events Navigator
const EventsNavigator = () => (
  <EventsStack.Navigator initialRouteName="Events">
    <EventsStack.Screen
      name="Events"
      component={Events}
      options={{
        title: '',
        headerShown: false,
      }}
    />

    <EventsStack.Screen
      name="EventDetails"
      component={EventDetails}
      options={{
        title: '',
        headerShown: true,
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderBottomWidth: 0,
        },
      }}
    />
  </EventsStack.Navigator>
);

// TypeScript Type: Event
export interface Event {
  eventTitle: string,
  eventDescription: string | null,
  eventStreet: string,
  eventLocation: string,
  eventLatitude: number,
  eventLongitude: number,
  eventDateStart: number,
  eventDateEnd: number,
  eventTimeStart: string,
  eventTimeEnd: string,
};

// TypeScript Type: Event Stack Params
export interface EventStackParams {
  Events: undefined,
  EventDetails: {
    item: Event,
  },
};

通过将

接口

更改为

类型

解决了这一问题

// TypeScript Type: Event Stack Params
export type EventStackParams = {
  Events: undefined,
  EventDetails: {
    item: Event,
  },
};