使用createProxySSGHelpers时无法获取URL参数householdId问题咨询

1. 确认动态路由与params的对应关系 #

Next.js的getStaticProps中，params仅在动态路由页面（如pages/[householdId].tsx）中存在。如果你的页面不是动态路由命名（比如直接用pages/household.tsx），或者路由层级不匹配，params必然为undefined。

• 检查页面文件命名是否符合动态路由规则，确保householdId是路由中的动态段。
• 若为嵌套路由（如pages/households/[householdId].tsx），需保证路由结构与参数名称完全对应。

2. 检查getStaticPaths配置 #

动态路由页面必须配置getStaticPaths，返回包含所有预生成路径的数组，否则Next.js无法识别路由参数：

export async function getStaticPaths() {
  // 从数据库/API拉取所有有效的householdId
  const households = await db.household.findMany({ select: { id: true } });
  
  return {
    paths: households.map(household => ({
      params: { householdId: household.id }
    })),
    fallback: "blocking" // 根据业务需求选择true/false/blocking
  };
}

如果fallback设为false，未在paths中列出的路由会返回404；设为blocking则会在首次访问时动态生成页面。

3. 正确传递参数给tRPC SSG调用 #

使用createProxySSGHelpers时，SSG模式下上下文不会自动携带URL参数，必须手动将params中的householdId传入tRPC路由调用：

export async function getStaticProps({ params }) {
  const householdId = params?.householdId;
  if (!householdId) throw new Error("No householdId.");

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: {}, // 按需传入上下文（如DB实例），无需传入路由参数
  });

  // 调用tRPC路由时手动传入householdId
  await ssg.household.getById.query(householdId);

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
}

4. 校验tRPC路由参数定义 #

确保tRPC路由的输入参数名称与你传递的householdId匹配：

// tRPC路由定义示例
const appRouter = router({
  household: router({
    getById: publicProcedure
      .input(z.string()) // 参数类型需与传入的householdId类型一致
      .query(({ input }) => {
        return db.household.findUnique({
          where: { id: input } // 这里的input就是传入的householdId
        });
      }),
  }),
});

如果路由定义的参数是id而不是直接用householdId，调用时直接传入值即可，无需额外映射。

5. 序列化问题的根源 #

移除householdId判断后出现的“undefined无法序列化”问题，本质是参数未正确获取导致tRPC调用返回undefined，而Next.js要求getStaticProps返回的props必须是可序列化的JSON。解决前面的参数获取问题后，该序列化问题会自动消失。若仍有其他序列化问题，需确保tRPC返回的数据中没有函数、Symbol等不可序列化类型。

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