TypeScript报错：类型'{ params: { slug: any; }; }'不可分配给string类型参数

问题原因 #

你定义pathsData的类型为string[]（字符串数组），但你实际往数组里插入的是{ params: { slug: slugs } }结构的对象，类型完全不匹配，因此触发类型报错。

解决方法 #

首先定义和你预期结构匹配的类型，再修改pathsData的类型声明即可：

// 定义单条path的结构类型
type PathItem = {
  params: {
    slug: string[]
  }
}

export async function getStaticPaths() {
    const { data } = await client.query({
        query: GET_PAGES_URI,
    })

    // 修改类型为PathItem数组
    const pathsData : PathItem[] = [];

    data?.pages?.nodes && data?.pages?.nodes.forEach(page => {
        if (!isEmpty(page?.uri)) {
            const slugs = page?.uri?.split("/").filter(pageSlug => pageSlug);
            pathsData.push({ params: { slug: slugs } })
        }
    })

    return { 
        paths: pathsData,
        fallback: true,
    }
}

额外优化说明 #

• 原代码里用map做遍历逻辑是不规范的，map是用来生成新数组的方法，纯遍历操作建议改用forEach
• 如果你用的是Next.js的getStaticPaths，默认入参不是slug: Array<string>，不需要额外声明这个入参，已经在上面的修正代码里移除了。

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