任何导航器均未处理有效负载 {"name":"Game","params":{"roomId":"..."}} 的操作“NAVIGATE”

Question

我正在使用 firebase 在反应本机（打字稿）中创建游戏，但在添加“游戏”屏幕时遇到此错误：

我的 App.tsx 有这个代码：

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Login from './app/screens/Authentication/Login';
import Register from './app/screens/Authentication/Register';
import Home from './app/screens/Home/Home';
import Game from './app/screens/Game/Game';
import { FIREBASE_AUTH } from './FirebaseConfig';

const Stack = createNativeStackNavigator();

export default function App() {
  ...

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        ) : (
          <>
            <Stack.Screen
              name='Login'
              component={Login}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name='Register'
              component={Register}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name='Game'
              component={Game}
              options={{ headerShown: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这是我的 types.tsx 文件的一部分：

import { StackNavigationProp } from '@react-navigation/stack';

// Navigation
type RootStackParamList = {
    Home: undefined;
    Login: undefined;
    Register: undefined;
    Game: { roomId: string | null };
}

export type HomeNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
export interface HomeProps {
    navigation: HomeNavigationProp;
}
export type RegisterNavigationProp = StackNavigationProp<RootStackParamList, 'Register'>;
export interface RegisterProps {
    navigation: RegisterNavigationProp;
}
export type LoginNavigationProp = StackNavigationProp<RootStackParamList, 'Login'>;
export interface LoginProps {
    navigation: LoginNavigationProp;
}
export type GameNavigationProp = StackNavigationProp<RootStackParamList, 'Game'>;
export interface GameProps {
    navigation: GameNavigationProp;
    route: {
        params: {
            roomId: string | null;
        }
    }
}

我不明白为什么这个会引发错误，而前 3 个却不会......

完整错误：

抱歉，帖子很长，如果有必要，我可以显示更多代码，但我不得不承认这次我真的一无所知......
谢谢！

Answer 1

您应该添加

RootStackParamList

类型：

const Stack = createNativeStackNavigator<RootStackParamList>();