Next.js客户端数据获取异常：页面重载无数据，热更新后正常的修复方案

这个问题完全可以修复，核心原因是页面重载时Next.js的路由参数还未完全解析，导致初始执行useEffect时id为undefined，请求逻辑被跳过，所以控制台返回空数组；而修改代码触发热重载时，路由已经解析完成，id存在，请求能正常执行。

修复方式一：添加正确的依赖项 #

将id加入useEffect的依赖数组，同时把URL的生成移到useEffect内部避免闭包问题：

const router = useRouter()
const { id } = router.query

useEffect(() => {
    async function fetchData() {
        if (!id) return
        setLoad(true)
        const URL = `http://localhost:4500/theme/${id}`
        const response = await fetch(URL)
        const data = await response.json()
        setData(data)
        setLoad(false)
    }
    fetchData()
}, [id])

当id从undefined变为实际路由参数值时，useEffect会自动重新执行，触发数据请求。

修复方式二：利用路由就绪状态（更稳妥） #

使用router.isReady属性确保路由完全解析后再执行请求：

const router = useRouter()
const { id } = router.query

useEffect(() => {
    async function fetchData() {
        if (!router.isReady || !id) return
        setLoad(true)
        const URL = `http://localhost:4500/theme/${id}`
        const response = await fetch(URL)
        const data = await response.json()
        setData(data)
        setLoad(false)
    }
    fetchData()
}, [router.isReady, id])

router.isReady会在Next.js完成路由解析后变为true，这时候id肯定是有效的，能彻底避免初始加载时参数未就绪的问题。

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