使用T3 Stack调用控制器时出现TRPC类型错误及客户端JSON解析问题

• 检查TRPC路由/控制器定义完整性
  确保router中每个procedure都正确绑定了解析函数，没有引用未定义或未初始化的变量。比如避免出现router({ demoProc: undefined })这类错误，这类情况会直接触发Cannot read properties of undefined (reading '_def')。

• 验证TRPC服务端初始化配置
  确认initTRPC实例创建正确，所有router的procedure都基于同一个实例生成。如果混用多个tRPC实例，会导致procedure不兼容，进而引发_def读取错误。

• 排查客户端请求路径配置
  客户端TRPC Client的baseUrl必须指向正确的API端点（默认是/api/trpc）。路径错误会导致服务器返回404 HTML页面，触发客户端的JSON解析错误（Unexpected token '<'）。

• 检查服务端API路由实现
  确认pages/api/trpc/[trpc].ts（App Router对应app/api/trpc/[trpc]/route.ts）正确导入并挂载了你的root router。如果路由导入路径错误，服务端无法处理TRPC请求，会返回默认HTML错误页。

• 查看完整服务端错误栈
  调高服务端日志级别，获取详细错误调用栈定位问题。比如在tRPC初始化时配置：

  const t = initTRPC.create({
    logger: { error: console.error }
  });
  

  输出完整错误信息，快速定位到出问题的procedure或路由定义。

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