NextJS 14中sitemap.tsx数组处理时出现TypeScript错误

问题原因 #

1. 字段名不匹配：NextJS官方的MetadataRoute.Sitemap类型要求站点地图条目使用changefreq字段，你代码中误用了changeFrequency，导致类型校验失败。
2. Filter回调返回值错误：NavContacts.filter的回调函数返回的是元素对象，而非布尔值，不符合TypeScript对Array.filter的类型要求。
3. 无用且错误的自定义类型：你定义的sitemap类型使用了大写的String/Number（TypeScript中应使用小写的string/number），且该类型未被实际使用。

修复方案 #

1. 修正字段名 #

将所有条目中的changeFrequency替换为changefreq，匹配官方类型定义。

2. 修正Filter回调 #

将filter的回调改为直接返回布尔值，简化判断逻辑。

3. 移除无用自定义类型 #

删除未使用的sitemap类型定义，直接依赖NextJS提供的MetadataRoute.Sitemap类型。

修复后的完整代码 #

import { allProtoDesigns, allProtoWebs } from "contentlayer/generated";
import { NavContacts } from "@/lib/NavContact";
import { MetadataRoute } from "next";

const GetWeb = () => {
  const doc = allProtoWebs;
  return doc;
};

const GetDesign = () => {
  const doc = allProtoDesigns;
  return doc;
};

export default function sitemap(): MetadataRoute.Sitemap {
  const siteUrl = process.env.NEXT_PUBLIC_DOMAIN_URL || 'http://localhost:3000';
  const web = GetWeb();
  const designs = GetDesign();

  const allWeb =
    web?.map((web) => {
      return {
        url: `${siteUrl}${web.slug}`,
        lastModified: new Date(),
        changefreq: "weekly" as const,
        priority: 0.8,
      };
    }) || [];

  const allDesign =
    designs?.map((design) => {
      return {
        url: `${siteUrl}${design.slug}`,
        lastModified: new Date(),
        changefreq: "weekly" as const,
        priority: 0.8,
      };
    }) || [];

  const contacts =
    NavContacts?.filter((val) => !val.name.includes("Form"))
      .map((design) => {
        return {
          url: `${siteUrl}/contact${design.link}`,
          lastModified: new Date(),
          changefreq: "weekly" as const,
          priority: 0.8,
        };
      }) || [];

  return [
    {
      url: `${siteUrl}`,
      lastModified: new Date(),
      changefreq: "yearly" as const,
      priority: 1,
    },
    {
      url: `${siteUrl}/portfolio`,
      lastModified: new Date(),
      changefreq: "weekly" as const,
      priority: 0.8,
    },
    {
      url: `${siteUrl}/about`,
      lastModified: new Date(),
      changefreq: "weekly" as const,
      priority: 0.5,
    },
    {
      url: `${siteUrl}/contact`,
      lastModified: new Date(),
      changefreq: "weekly" as const,
      priority: 0.5,
    },
    // ...allWeb,
    // ...allDesign,
    ...contacts,
  ];
}

额外说明 #

• 添加as const是为了让TypeScript明确changefreq的值属于官方定义的枚举范围，避免类型模糊。
• 修正了allDesing的拼写错误为allDesign，避免潜在的变量名问题。

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