Next.js 14中如何将异步函数返回值赋值并传递给组件？

步骤1：修正异步函数getDescripcion #

原函数中getTranslations的调用方式不符合next-intl服务器端API规范，需要传入包含locale和namespace的配置对象：

import { getTranslations } from 'next-intl/server';

export const getDescripcion = async ({ locale, tema }) => {
  const t = await getTranslations({ locale, namespace: tema });
  const arrayDescripcion = [];

  ['1', '2'].forEach((contenido) => {
    arrayDescripcion.push(t(`secciones.conflictos.descripcion.${contenido}`));
  });

  return arrayDescripcion;
};

步骤2：修改Gestion页面为异步Server Component #

Next.js 14 App Router默认支持异步Server Component，直接在组件内部执行异步数据获取，再将结果传递给子组件：

import { Hero, Section } from '@/components';
import { getTranslations } from 'next-intl/server';
import { getDescripcion } from '@/hooks/getData';

// 页面组件改为异步函数，接收params（包含当前locale）
export default async function Gestion({ params: { locale } }) {
  // 获取页面主翻译资源
  const t = await getTranslations({ locale, namespace: 'Gestion' });
  // 获取Section组件需要的翻译资源（假设对应'Section'命名空间）
  const t1 = await getTranslations({ locale, namespace: 'Section' });
  // 调用异步函数获取描述数组
  const arrayConflicto = await getDescripcion({ locale, tema: 'Gestion' });
  // 若salidas为异步数据，同样用await获取
  // const salidas = await fetchSalidasData(locale);

  return (
    <>
      <Hero
        title={t('titulo')}
        description={t('descripcion')}
        color='0, 0, 0'
        img='https://res.cloudinary.com/eparionad/image/upload/v1707358241/arcoIris-beta/portada_GS_300x_11zon_nuukz7.webp'
        position='right 65% bottom 45%'
      />
      <Section
        title={t1('titulo')}
        description={arrayConflicto}
        carousel={salidas}
      />
    </>
  );
}

export async function generateMetadata({ params: { locale } }) {
  const t = await getTranslations({ locale, namespace: 'Gestion' });

  return {
    title: t('titulo_metadata'),
    description: t('descripcion_metadata'),
  };
}

关键说明 #

• Server Component异步支持：Next.js 14 App Router默认组件为Server Component，允许直接在组件内使用async/await执行异步逻辑，无需额外数据获取钩子。
• locale传递：必须将当前语言环境locale传递给所有服务器端翻译函数，确保翻译内容与用户语言匹配。
• 替换客户端钩子：原代码中的useTranslations是客户端钩子，在Server Component中需改用服务器端的getTranslations，否则会触发运行时错误。

内容的提问来源于stack exchange，提问作者Ernesto Pariona Diaz