React Native导航无法读取Topic接口的id，请求技术支援

React Navigation无法读取接口声明的topic的id，该topic在组件return范围内可正常使用，但在onPress函数中提示“cannot find name topic”。

原代码如下：

import { View, Text, StyleSheet, Image, Pressable} from "react-native";
import React from "react";
import Colors from "../../constants/Colors";
import { Topic } from "../types/models";
import { useNavigation } from "@react-navigation/native";

interface TopicCellProps {
    topic: Topic; // 此处已声明
}

const navigation = useNavigation();

const onPress = () => {
    navigation.navigate("Topic", {id: topic.id}); // 报错：cannot find name topic
};

const TopicCell = ({topic}: TopicCellProps) => {
    return (
        <Pressable 
        onPress={onPress}
        style={styles.container}>
                <View style={[styles.circle, {
                    width: "80%",
                    borderRadius: 100,
                    borderWidth: 5,
                    borderColor: Colors.light.dark,
                    aspectRatio: 1,
                    backgroundColor: Colors.light.secondary,
                    justifyContent: "center",
                    alignItems: "center",
                    },
                    ]}>
                    <Image source={{uri: topic.icon}} style={styles.image}/>
                </View>
                <Text style={styles.title}>{topic.title}</Text>
                </Pressable>
    );
};

相关资源结构：

// "./types/models"
export type Topic = {
    id: string;
    title: string;
    icon: string;
    level: number;
    resources?: resources[];
};

export type resources = {
    id: string;
    title: string;
    url: string;
}

// "./topics.ts"
id: "1",
    title: "Live Chat",
    icon: "https://img.icons8.com/color/48/000000/health-book.png",
    level: 1,
    resources: [
        {
            id: "1",
            title: "Profile1",
            url: "https://www.coliru.com/",
        }, {
            id: "2",
            title: "Profile2",
            url: "https://www.coliru.com/",
        },
    ],

问题根源有两个：

1. useNavigation是React Hook，必须在组件函数内部调用，放在组件外部会违反Hook规则。
2. onPress函数定义在组件外部，无法访问组件内部接收的topic参数，自然找不到topic变量。

修正方案：把navigation的初始化和onPress函数都移到TopicCell组件内部，就能正常访问topic了。

修正后的代码：

import { View, Text, StyleSheet, Image, Pressable} from "react-native";
import React from "react";
import Colors from "../../constants/Colors";
import { Topic } from "../types/models";
import { useNavigation } from "@react-navigation/native";

interface TopicCellProps {
    topic: Topic;
}

const TopicCell = ({topic}: TopicCellProps) => {
    // 移到组件内部调用useNavigation
    const navigation = useNavigation();

    // 组件内部定义onPress，可直接访问topic
    const onPress = () => {
        navigation.navigate("Topic", {id: topic.id});
    };

    return (
        <Pressable 
        onPress={onPress}
        style={styles.container}>
                <View style={[styles.circle, {
                    width: "80%",
                    borderRadius: 100,
                    borderWidth: 5,
                    borderColor: Colors.light.dark,
                    aspectRatio: 1,
                    backgroundColor: Colors.light.secondary,
                    justifyContent: "center",
                    alignItems: "center",
                    },
                    ]}>
                    <Image source={{uri: topic.icon}} style={styles.image}/>
                </View>
                <Text style={styles.title}>{topic.title}</Text>
                </Pressable>
    );
};

额外建议：类型定义里resources首字母改为大写（Resources），符合TypeScript命名规范，避免和变量名混淆：

export type Topic = {
    id: string;
    title: string;
    icon: string;
    level: number;
    resources?: Resources[]; // 改为Resources
};

export type Resources = { // 首字母大写
    id: string;
    title: string;
    url: string;
}

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