Next 14服务端组件中如何优雅处理数据库查询错误？

首先要明确：你之前尝试的自定义Hook方案在服务端组件里是不可行的——React Hooks只能在客户端组件或符合Hook规则的自定义Hook中使用，服务端组件是async函数，直接调用带await的自定义Hook会违反React的Hook规则，导致报错。

针对你遇到的代码冗余、新增查询繁琐的问题，这里提供几个实用的优化思路：

方案一：封装通用查询校验工具函数 #

把「执行查询+判空返回错误」的重复逻辑抽成复用函数，新增查询时只需调用这个函数，无需重复写if判断：

// 通用查询校验函数
async function fetchOrThrow<T>(
  query: () => Promise<T | null>,
  errorMessage: string
): Promise<T> {
  const result = await query();
  if (result === null) {
    throw new Error(errorMessage);
  }
  return result;
}

async function Details({ params }: { params: { id: string } }) {
  const id = Number(params.id);

  try {
    // 调用通用函数简化查询逻辑
    const data1 = await fetchOrThrow(
      () => prismadb.model1.findUnique({ where: { id } }),
      'Missing Data 1'
    );
    const data2 = await fetchOrThrow(
      () => prismadb.model2.findUnique({ where: { id } }),
      'Missing Data 2'
    );

    return (
      {/* 渲染数据的内容 */}
    );
  } catch (error) {
    // 统一处理错误提示
    if (error instanceof Error) {
      return <div>{error.message}</div>;
    }
    return <div>Unknown error</div>;
  }
}

如果后续需要新增查询，只需要在try块里加一行fetchOrThrow调用即可，代码简洁性和可维护性大幅提升。

方案二：并行查询（无依赖场景） #

如果多个查询之间没有依赖关系（比如data2不需要用到data1的字段），可以用Promise.all并行执行查询，减少总耗时：

async function fetchOrThrow<T>(
  query: () => Promise<T | null>,
  errorMessage: string
): Promise<T> {
  const result = await query();
  if (result === null) {
    throw new Error(errorMessage);
  }
  return result;
}

async function Details({ params }: { params: { id: string } }) {
  const id = Number(params.id);

  try {
    // 并行执行两个查询，比顺序执行更快
    const [data1, data2] = await Promise.all([
      fetchOrThrow(() => prismadb.model1.findUnique({ where: { id } }), 'Missing Data 1'),
      fetchOrThrow(() => prismadb.model2.findUnique({ where: { id } }), 'Missing Data 2')
    ]);

    return (
      {/* 渲染数据的内容 */}
    );
  } catch (error) {
    if (error instanceof Error) {
      return <div>{error.message}</div>;
    }
    return <div>Unknown error</div>;
  }
}

方案三：抽离服务层（大型项目推荐） #

如果项目中有大量类似的数据查询逻辑，可以把数据获取逻辑抽离到单独的服务文件，组件只负责调用服务并处理结果，实现逻辑解耦：

// services/dataService.ts
export async function getModel1Data(id: number) {
  const data = await prismadb.model1.findUnique({ where: { id } });
  if (!data) throw new Error('Missing Data 1');
  return data;
}

export async function getModel2Data(id: number) {
  const data = await prismadb.model2.findUnique({ where: { id } });
  if (!data) throw new Error('Missing Data 2');
  return data;
}

然后在组件中调用：

import { getModel1Data, getModel2Data } from '@/services/dataService';

async function Details({ params }: { params: { id: string } }) {
  const id = Number(params.id);

  try {
    const [data1, data2] = await Promise.all([
      getModel1Data(id),
      getModel2Data(id)
    ]);

    return (
      {/* 渲染数据的内容 */}
    );
  } catch (error) {
    if (error instanceof Error) {
      return <div>{error.message}</div>;
    }
    return <div>Unknown error</div>;
  }
}

这种方式下，数据逻辑集中管理，新增查询只需在服务层添加对应函数，组件调用即可，完全避免了组件内的代码冗余。

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