React Navigation中如何正确传递参数？页面跳转传参失败问题排查

首先，核心问题是你在FileDetailScreen里直接尝试从组件props中获取file参数，但React Navigation的屏幕参数并不是直接作为组件props传递的——它们需要通过route.params来获取。另外，你的loadDetails函数调用逻辑也有小瑕疵，我会一起帮你规范。

步骤1：修正FileDetailScreen的参数获取方式 #

React Navigation的栈屏幕参数需要通过useRoute钩子来读取，而不是直接解构组件props。修改后的代码如下：

import { useRoute } from '@react-navigation/native';

// 定义当前屏幕的参数类型
interface FileDetailParams {
  file: FileInfo;
}

const FileDetailScreen = () => {
  // 通过useRoute获取导航参数，并指定类型
  const route = useRoute<{ params: FileDetailParams }>();
  const { file } = route.params;

  return (
    <View style={globalStyles.post_login_container}>
      <Text>
        {file ? <Text>Exists</Text> : <Text>Does not exists</Text>}
      </Text>
    </View>
  );
};

步骤2：规范loadDetails函数的调用逻辑 #

你在TouchableOpacity里调用loadDetails(fileInfo)，但loadDetails函数并没有定义参数，它依赖的是组件props里的fileDetails。这容易造成参数歧义，建议让函数明确接收参数：

const FileCard = ({ fileDetails }: Props) => { 
  const navigation = useNavigation(); 
  // 让函数接收参数，逻辑更清晰
  const loadDetails = (targetFile: FileInfo) => { 
    console.log(JSON.stringify(targetFile)); 
    // 去掉不必要的as never，后续可以通过类型定义解决类型提示问题
    navigation.navigate("FileDetailScreen", { file: targetFile }) 
  }

  return (
    <TouchableOpacity activeOpacity={0.8} onPress={() => loadDetails(fileDetails)} > 
      {/* 组件内容与样式 */}
    </TouchableOpacity>
  )
}

步骤3：添加导航类型定义（可选，提升类型安全性） #

为了彻底避免用as never绕过类型检查，你可以定义全局的导航参数类型，让TypeScript自动校验参数是否正确：

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

// 定义所有栈屏幕的参数类型
type RootStackParamList = {
  LoginScreen: undefined;
  RegisterScreen: undefined;
  ControlScreen: undefined;
  ProfileScreen: undefined;
  FilesScreen: undefined;
  UploadFileScreen: undefined;
  SearchScreen: undefined;
  ResultsScreen: undefined;
  FileDetailScreen: { file: FileInfo };
};

// 在FileCard里指定navigation的正确类型
const FileCard = ({ fileDetails }: Props) => { 
  const navigation = useNavigation<StackNavigationProp<RootStackParamList, 'FileDetailScreen'>>(); 
  // ...其余代码
}

验证修复 #

完成以上修改后，重新运行应用：

• 点击FileCard时，file参数会正确传递到FileDetailScreen
• 页面会显示“Exists”，你也可以正常访问file的所有属性

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