Next.js 13动态页面为何传入favicon.ico作为id参数？

浏览器会自动请求网站根目录的favicon.ico文件用于显示标签页图标，由于你的项目中没有这个文件，Next.js的App Router会将该请求匹配到动态路由/app/[id]/page.tsx，把favicon.ico作为id参数传入。

关于TypeScript类型定义的疑惑：params.id的number类型只是编译时校验，运行时Next.js传递的参数本质是字符串，编译时的类型断言不会在运行时做自动类型转换，所以"favicon.ico"会被直接传入数据请求函数，导致报错。

1. 添加favicon.ico文件（最直接） #

在项目的public目录下放置一个favicon.ico文件，浏览器请求该文件时会直接获取资源，不会触发动态路由匹配。

2. 配置Next.js重写规则 #

在next.config.js中添加重写规则，将favicon.ico的请求指向正确资源或返回404，避免触发动态路由：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/favicon.ico',
        destination: '/favicon.ico', // 有文件则指向它，无文件可指向占位图或404
      },
    ];
  },
};

module.exports = nextConfig;

若没有favicon文件，也可直接返回404：

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/favicon.ico',
        destination: '/404',
      },
    ];
  },
};

3. 在动态页面中添加参数校验 #

在Page组件开头对params.id进行校验，确保它是有效数字，否则返回404页面：

// /app/[id]/page.tsx
import { notFound } from 'next/navigation';

export default async function Page({ params }: ProfilePageProps) {
  // 校验id是否为有效整数
  const id = Number(params.id);
  if (isNaN(id) || !Number.isInteger(id)) {
    notFound(); // 返回404页面
  }

  const session = await getServerSession(authOptions);
  // ... 剩余业务代码
}

注意运行时params.id是字符串类型，需要先转为数字再判断有效性。

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