Javascript 在SWR获取请求中使用Next.js动态路由查询对象

当使用Next.js动态路由时，我试图使用路由查询对象发出SWR fetch请求，但在设置查询对象之前调用了我的SWR fetch请求

给定动态路由<代码> /POST/[ID] < /代码>，考虑页面<代码> /帖子/ 123 < /代码> .<

import { useRouter } from 'next/router';
import useSWR from 'swr';

export default function MyPage() {
  const router = useRouter();
  const { id } = router.query;

  const url = `https://my.api.com/posts/${id}`    // I've also tried using let here
  const { data, error } = useSWR(url, fetcher);
  
  console.log(url)

此URL最初记录为

https://my.api.com/posts/undefined

API返回一个错误，因为

https://my.api.com/posts/undefined

当然不是有效的路径

紧接着，URL控制台以

https://my.api.com/posts/123

然后页面上的数据通常会被填充，但有时数据不会被填充，并且会卡在“加载”状态。当我硬编码URL时，这种情况从未发生过

---

我有什么地方做错了吗？为什么查询对象不能立即使用？有没有一种方法可以优雅地等待它被设置？

您可以尝试使用条件数据获取，如下所示：

const { data, error } = useSWR(id ? url : null, id ? fetcher : null);

同时检查以下对话：