TRPC API开发：JSON字符串转数组遇TypeScript类型错误

核心问题拆解 #

你遇到的问题分两个核心层面：

1. TypeScript的类型校验拦截了string|null|undefined类型变量传入JSON.parse（该方法仅接受string类型参数）
2. 数据库中存储的JSON字符串可能存在格式不合法的情况，直接解析会触发运行时错误

分步解决方案 #

在TRPC路由中加入空值过滤、错误捕获和格式校验逻辑，确保返回数据完全符合预期格式：

import { z } from "zod";
import { publicProcedure, router } from "../trpc";

// 定义返回数据的类型（可选，提升TypeScript类型安全性）
interface ApiItem {
  name: string;
  text?: string;
}

export const appRouter = router({
  fetchTargetData: publicProcedure
    .query(async ({ ctx }) => {
      // 从数据库查询目标数据
      const dbRecord = await ctx.prisma.yourTargetModel.findFirst({
        // 填写你的查询条件
      });

      // 初始化默认返回数组
      let parsedData: ApiItem[] = [];

      // 1. 过滤null/undefined，解决TypeScript类型报错
      if (dbRecord?.data_json) {
        try {
          // 2. 尝试解析JSON字符串
          const rawParsedResult = JSON.parse(dbRecord.data_json);
          // 3. 确保解析结果为数组（单个对象则包装为数组）
          parsedData = Array.isArray(rawParsedResult) ? rawParsedResult : [rawParsedResult];
        } catch (err) {
          // 捕获解析失败场景，避免API崩溃
          console.error("data_json解析失败:", err);
          parsedData = [];
        }
      }

      // 返回符合要求的标准格式
      return {
        code: 200,
        data: parsedData,
      };
    }),
});

关键细节说明 #

• 空值处理：通过dbRecord?.data_json的可选链判断，仅当data_json为有效字符串时才执行解析，直接规避TypeScript类型错误
• 错误捕获：针对数据库中可能存在的不合法JSON（比如你提到的"{\"name\":}"），用try-catch包裹解析过程，保证API不会因单个数据的解析失败而异常
• 格式校验：额外判断解析结果是否为数组，确保返回的data始终是数组类型，严格匹配你期望的返回结构
• 类型约束：通过ApiItem接口定义返回数据的结构，让TypeScript提前识别类型不匹配问题

可选优化建议 #

如果数据库中存在大量格式不合法的data_json，建议在数据入库阶段就添加格式校验逻辑，从源头避免后续解析问题。比如在Prisma模型中添加字段级校验，或者在写入数据库前先验证JSON格式的合法性。

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