Prismic+Nuxt3+TypeScript：如何解析关联链接的类型数据

问题场景 #

在Nuxt3结合TypeScript与Prismic开发时，通过fetchLinks获取关联文档数据后，TypeScript无法正确识别关联数据的类型。访问嵌套关联属性（如document.data?.symbols?.data?.symbols?.data）时，该属性类型被标记为unknown，仅默认识别link_type字段，需要无hack手段的类型解析方案。

代码示例 #

const { data: document } = await useAsyncData('[product-uids]', () =>
  client.getByUID('product', route.params.product_id as string, {
    fetchLinks: [
      'product_symbols.symbols',
      
    ],
  })
);

解决方案 #

1. 自动生成Prismic自定义类型 #

使用Prismic官方工具根据你的Prismic自定义类型自动生成TypeScript接口，这是最省心的方案：

• 安装依赖：npm install @prismicio/types --save-dev
• 运行Prismic CLI命令生成类型文件：npx prismic generate types
• 生成的类型文件默认放在src/types/prismic.ts，直接导入使用即可让TypeScript自动识别关联数据类型。

2. 手动定义类型并指定泛型 #

如果自动生成的类型无法满足嵌套场景，可手动扩展类型并在查询方法中指定泛型：

// 定义关联的ProductSymbol文档类型
interface ProductSymbol {
  data: {
    // 填入symbols文档的实际字段类型，比如name: string; icon: string;
  };
}

// 定义包含关联数据的Product类型
interface Product {
  data: {
    symbols: {
      data: {
        symbols: ProductSymbol[]; // 明确关联数据的类型
      };
    };
  };
}

// 查询时指定泛型
const { data: document } = await useAsyncData('[product-uids]', () =>
  client.getByUID<Product>('product', route.params.product_id as string, {
    fetchLinks: ['product_symbols.symbols'],
  })
);

3. 利用Prismic的FetchLinks类型辅助 #

Prismic提供了FetchLinks类型，可以精确指定通过fetchLinks获取的字段类型：

import type { FetchLinks } from '@prismicio/client';

// 假设已自动生成或手动定义了Product和ProductSymbol类型
type ProductWithSymbols = Product & {
  data: {
    symbols: FetchLinks<'product_symbols', 'symbols'>;
  };
};

// 查询时使用扩展后的类型
const { data: document } = await useAsyncData('[product-uids]', () =>
  client.getByUID<ProductWithSymbols>('product', route.params.product_id as string, {
    fetchLinks: ['product_symbols.symbols'],
  })
);

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