我试图将参数传递给Amplify/NextJS应用程序中的动态页面。
这是一个正在进行的工作。我的目标是使用传递的参数来创建一个简单的页面，该页面基于在URL调用中传递的4个参数。
发生的情况是，如果我修改动态页面文件的次数超过了几条语句，参数将不再被传递-或者更有可能是，它们被某种方式损坏了。
动态页面文件（[id].js）非常简单：

import {useRouter} from 'next/router'

export default function Detail() {
    const router = useRouter()
    console.log('router', router)
    const {id, params} = router.query
    console.log('id', id)
    console.log('params', params)
    // const parsed = JSON.parse(params)

}

调用页面的代码在这里（注意onClick()中的JSON.stringify()）：

export function GetDanzanRyuCollection(narration, items, path) {

    return (
        <>
            <View>
                <Text>
                    {narration}
                </Text>
                <Collection
                    type="list"
                    items={items}>
                    {(item, index) => (
                        <View
                            key={index}
                            onClick={() => {
                                let parms = JSON.stringify(item)
                                window.location.href = `./${path}/${item.Number}?params=${parms}`
                            }}>
                            <Card
                                width={"40rem"}
                                variation={"elevated"}
                                key={index}
                                padding="1rem"
                                textAlign={"left"}
                                backgroundColor={"blue.20"}
                                fontSize={"1.5rem"}>
                                <Flex
                                    direction="row"
                                    justifyContent="flex-start"
                                    alignItems="flex-start"
                                    alignContent="flex-start"
                                    gap="1rem">
                                    <Text
                                        width="2.25rem">
                                        {item.Number}
                                    </Text>
                                    <Text
                                        isTruncated="true"
                                        height="3.0rem"
                                        width="15.25rem">
                                        {item.Name}
                                    </Text>
                                    <Text
                                        isTruncated="true"
                                        height="3.0rem"
                                        width="19.25rem">
                                        {item.Description}
                                    </Text>
                                    <Rating
                                        maxValue={1}
                                        value={item.Variations.length}
                                        icon={<ImVideoCamera/>}/>
                                </Flex>
                            </Card>
                        </View>
                    )}
                </Collection>
            </View>
        </>
    )
}

使用上面未修改的代码，我在浏览器日志中得到了以下输出。换句话说，我得到了所期望的参数：

但是，如果我取消对const parsed = JSON.parse(params)语句的注解（上面的），我会在日志中得到这样的输出（注意id和params现在显示为undefined）：

我做错了什么其次，为什么单击一次会多次调用[id].js文件函数？
谢谢