Next.js动态路由获取本地数据意外出现Promise问题求助

问题场景 #

在Next.js动态路由页面[id].js中，尝试直接导入本地db.js的同步函数getItemByDatabaseId获取单条数据，未使用异步fetch，但控制台打印detailItem为Promise，同时出现调试错误：Promised response from onMessage listener went out of scope。

代码片段 #

db.js #

// 注：此处假设lostItems为同步定义的数组，若实际为异步加载需补充完整逻辑
const lostItems = [/* 你的本地数据数组 */];

function getItemByDatabaseId(id) {
  return lostItems.find((lostItem) => lostItem.id === id);
}

export { lostItems, foundItems, getItemByDatabaseId };

[id].js #

import { useRouter } from "next/router";
import { getItemByDatabaseId } from "../../components/Db";

function ItemDetail() {
  const router = useRouter();
  const itemdetailsId = router.query.id;

  const detailItem = getItemByDatabaseId(itemdetailsId);
  console.log(itemdetailsId);
  console.log(detailItem);
  return (
    <>
      <h1>
        Detail Page is working with dynamic IDs. This ID is: {itemdetailsId}.
      </h1>
      <p>{detailItem.id}</p>
    </>
  );
}

export default ItemDetail;

核心原因分析 #

1. db.js存在未暴露的异步逻辑：
   你贴出的getItemByDatabaseId是同步函数，但如果lostItems是通过top-level await（如从本地文件/异步API加载）获取的，或函数本身被误标记为async，会导致整个模块导出的函数被包裹为Promise。
2. 路由参数类型不匹配：
   router.query.id返回的是字符串类型，而lostItems中的id大概率是数字类型，导致find无法匹配、返回undefined。若后续代码对undefined进行异步操作（或Next.js开发环境的特殊处理），可能被误识别为Promise。
3. 调试错误的关联：
   Promised response from onMessage listener went out of scope是Next.js开发环境中Fast Refresh的常见警告，通常由未处理的Promise或异步逻辑不规范导致，解决核心的Promise问题后该警告会自动消失。

解决方案 #

1. 确保db.js为纯同步模块 #

检查db.js的完整代码，移除所有异步逻辑，同时添加参数类型转换避免匹配失败：

// 正确示例：同步定义数据+类型兼容处理
const lostItems = [
  { id: 1, name: "物品1" },
  { id: 2, name: "物品2" }
];

function getItemByDatabaseId(id) {
  // 统一转换为数字类型，避免字符串与数字不匹配
  const targetId = typeof id === "string" ? parseInt(id, 10) : id;
  return lostItems.find((item) => item.id === targetId);
}

export { lostItems, getItemByDatabaseId };

2. 处理路由参数的初始undefined状态 #

router.query.id在页面初始hydration阶段为undefined，需添加条件渲染避免报错：

import { useRouter } from "next/router";
import { getItemByDatabaseId } from "../../components/Db";

function ItemDetail() {
  const router = useRouter();
  const { id: itemdetailsId } = router.query;

  // 初始加载时id未就绪的处理
  if (!itemdetailsId) {
    return <div>加载中...</div>;
  }

  const detailItem = getItemByDatabaseId(itemdetailsId);

  // 未找到数据的兜底处理
  if (!detailItem) {
    return <div>未找到对应物品</div>;
  }

  return (
    <>
      <h1>详情页：ID {itemdetailsId}</h1>
      <p>物品ID：{detailItem.id}</p>
      <p>物品名称：{detailItem.name}</p>
    </>
  );
}

export default ItemDetail;

3. （可选）使用Next.js数据预取方法 #

若数据量较大或需要静态生成，建议使用getStaticProps（静态站点）或getServerSideProps（服务端渲染）预取数据，避免客户端渲染的延迟：

// [id].js
import { getItemByDatabaseId } from "../../components/Db";

function ItemDetail({ detailItem }) {
  if (!detailItem) {
    return <div>未找到对应物品</div>;
  }

  return (
    <>
      <h1>详情页：ID {detailItem.id}</h1>
      <p>物品名称：{detailItem.name}</p>
    </>
  );
}

// 静态生成时使用getStaticProps
export async function getStaticProps({ params }) {
  const detailItem = getItemByDatabaseId(parseInt(params.id, 10));
  return {
    props: { detailItem }
  };
}

export async function getStaticPaths() {
  // 生成所有可能的动态路由路径
  return {
    paths: [{ params: { id: "1" } }, { params: { id: "2" } }],
    fallback: false
  };
}

export default ItemDetail;

验证步骤 #

1. 重启Next.js开发服务器，确保代码修改生效。
2. 访问动态路由页面（如/items/1），检查控制台是否还打印Promise。
3. 确认数据正常展示，调试错误是否消失。

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