在Next.js的函数中使用router.query时参数为undefined该如何解决？

问题原因与修复方案 #

1. 作用域冲突问题

你提到确认不需要将id传入函数中，那需要先删除testFunction定义里的id形参：当前你给testFunction声明了同名形参，调用时又没有传值，函数内部读取的是这个未赋值的形参，自然返回undefined，和外层拿到的路由id没有关系。

2. Next.js路由参数加载规则问题

Next.js Pages Router 中，useRouter返回的query对象在页面首次 hydration 完成前是空值，只有路由完全挂载后才会填充路由参数。你的useEffect依赖是空数组，只会在首次渲染阶段执行，此时路由参数还没加载完成，必然拿不到id。

3. 额外规范问题

React 组件名必须大写开头，你当前组件名id为小写，会被识别为原生HTML标签，可能引发其他运行问题。

修复后代码 #

import React, { useState, useEffect } from 'react'
import { useRouter  } from 'next/router'
import axios from 'axios';

// 组件名改为大写开头
export default function DetailPage () {
    const [ response, setResponse ] = useState("");
    const router = useRouter();
    const id = router.query.id;

    // 删除形参，直接读取外层作用域的id
    const testFunction = () => {
        console.log(id);
    }

    // 依赖数组添加id，id更新后自动执行逻辑，加判断避免无值时运行
    useEffect(() => {
        if (!id) return
        testFunction();
    }, [id])

    return (
    <div>
    <p>params: {id}</p>
    </div>
  ) 
}

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