diff --git a/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts b/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts
index cb8f91b49f788..ad9daf790643f 100644
--- a/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts
@@ -122,8 +122,8 @@ const generateImageMetadata = imageModule.generateImageMetadata
 ${errorOnBadHandler(resourcePath)}
 
 export async function GET(_, ctx) {
-  const { __metadata_id__ = [], ...params } = ctx.params || {}
-  const targetId = __metadata_id__[0]
+  const { __metadata_id__, ...params } = ctx.params || {}
+  const targetId = __metadata_id__?.[0]
   let id = undefined
   const imageMetadata = generateImageMetadata ? await generateImageMetadata({ params }) : null
 
@@ -191,9 +191,16 @@ ${errorOnBadHandler(resourcePath)}
 ${'' /* re-export the userland route configs */}
 export * from ${JSON.stringify(resourcePath)}
 
+
 export async function GET(_, ctx) {
-  const { __metadata_id__ = [], ...params } = ctx.params || {}
-  const targetId = __metadata_id__[0]
+  const { __metadata_id__, ...params } = ctx.params || {}
+  ${
+    '' /* sitemap will be optimized to [__metadata_id__] from [[..._metadata_id__]] in production */
+  }
+  const targetId = process.env.NODE_ENV !== 'production'
+    ? __metadata_id__?.[0]
+    : __metadata_id__
+
   let id = undefined
   const sitemaps = generateSitemaps ? await generateSitemaps() : null
 
diff --git a/test/e2e/app-dir/metadata-dynamic-routes/app/gsp/sitemap.ts b/test/e2e/app-dir/metadata-dynamic-routes/app/gsp/sitemap.ts
index b9f981f7b86fa..b23a92ede6552 100644
--- a/test/e2e/app-dir/metadata-dynamic-routes/app/gsp/sitemap.ts
+++ b/test/e2e/app-dir/metadata-dynamic-routes/app/gsp/sitemap.ts
@@ -1,7 +1,12 @@
 import { MetadataRoute } from 'next'
 
 export async function generateSitemaps() {
-  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
+  return [
+    { id: 'child0' },
+    { id: 'child1' },
+    { id: 'child2' },
+    { id: 'child3' },
+  ]
 }
 
 export default function sitemap({ id }): MetadataRoute.Sitemap {
diff --git a/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts b/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
index f8526a3acd86c..0e16a2035cd25 100644
--- a/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
+++ b/test/e2e/app-dir/metadata-dynamic-routes/index.test.ts
@@ -197,7 +197,7 @@ createNextDescribe(
       })
 
       it('should support generate multi sitemaps with generateSitemaps', async () => {
-        const ids = [0, 1, 2]
+        const ids = ['child0', 'child1', 'child2', 'child3']
         function fetchSitemap(id) {
           return next
             .fetch(
@@ -558,7 +558,7 @@ createNextDescribe(
       })
 
       it('should generate static paths of dynamic sitemap in production', async () => {
-        const sitemapPaths = [0, 1, 2].map(
+        const sitemapPaths = ['child0', 'child1', 'child2', 'child3'].map(
           (id) => `.next/server/app/gsp/sitemap/${id}.xml.meta`
         )
         const promises = sitemapPaths.map(async (filePath) => {