TypeScript项目中调用getStaticPaths()返回404页面问题求解

问题原因 #

404问题核心是TypeScript类型约束缺失导致的返回结构不匹配，以及可能存在的路径读取错误，具体如下：

• 你声明的ArrObj接口没有实际用到，getAllPostIds没有显式声明返回类型，TypeScript隐性推断可能出现偏差，导致返回的paths结构不符合Next.js对getStaticPaths返回值的要求。
• 没有明确指定文件读取的返回类型，极端情况下会出现fileName不是字符串的情况，导致replace方法调用异常。
• 若postsDirectory路径配置错误，会导致读取不到md文件，返回的路径数组为空，自然所有动态路由都会404。

修复方案 #

1. 补全类型约束 #

将你定义的ArrObj接口用到getAllPostIds的返回类型声明上，同时给所有相关参数补全类型即可：

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

// 原有接口直接复用
interface ArrObj {
    params: {
        id: string;
    }
}

// 补充postsDirectory的正确路径配置，用process.cwd()对齐Node执行时的工作目录
const postsDirectory = path.join(process.cwd(), 'posts')

// 给函数加上返回类型约束，确保返回结构完全符合要求
export function getAllPostIds(): ArrObj[] {
    // 明确指定读取结果为字符串类型，避免类型歧义
    const fileNames = fs.readdirSync(postsDirectory, 'utf-8');

    return fileNames.map(fileName => {
        return {
            params: {
                // 只要fileName是字符串类型，replace方法调用完全没问题
                id: fileName.replace(/\.md$/, '')
            }
        }
    })
}

// 给id参数加字符串类型约束
export function getPostData(id: string) {
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const matterResult = matter(fileContents)

  return {
    id,
    ...matterResult.data
  }
}

export async function getStaticPaths(){
    const paths = getAllPostIds();
    return{
        paths,
        fallback: false
    }
}

// 给params补全类型约束
export async function getStaticProps({ params }: { params: { id: string } }) {
  const postData = getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

2. 额外排查点 #

• 确认动态路由文件命名正确，比如路由对应/posts/xxx的话，文件必须是pages/posts/[id].tsx
• 确认posts目录下存在至少一个后缀为.md的文件，文件名不能有特殊字符导致路径解析失败

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