Fix: Invalid Value for getStaticPaths Route Parameter in Astro

What Causes This Error?

This error occurs when a route parameter value in getStaticPaths() is not a valid type. Parameters must be strings, numbers, or undefined (for optional rest parameters).

The Problem

---
export function getStaticPaths() {
  return [
    // ❌ Object as param value
    { params: { slug: { id: 1 } } },

    // ❌ Array as param value
    { params: { slug: ['a', 'b'] } },

    // ❌ Boolean as param value
    { params: { slug: true } },

    // ❌ null as param value
    { params: { slug: null } },
  ];
}
---

The Fix

Use String Values

---
export function getStaticPaths() {
  return [
    // ✅ String
    { params: { slug: 'my-post' } },

    // ✅ Number (converted to string in URL)
    { params: { id: 123 } },

    // ✅ Template literal
    { params: { slug: `post-${1}` } },
  ];
}
---

Convert Objects to Strings

---
const posts = [
  { id: 1, data: { slug: 'first' } },
  { id: 2, data: { slug: 'second' } },
];

// ❌ Using object directly
export function getStaticPaths() {
  return posts.map((post) => ({
    params: { slug: post.data }, // Object!
  }));
}

// ✅ Extract string value
export function getStaticPaths() {
  return posts.map((post) => ({
    params: { slug: post.data.slug }, // String!
  }));
}
---

Common Scenarios

Array Slugs for Nested Paths

---
// ❌ Array as param
export function getStaticPaths() {
  return [
    { params: { path: ['docs', 'intro'] } },
  ];
}

// ✅ Join array to string for rest params
// src/pages/[...path].astro
export function getStaticPaths() {
  return [
    { params: { path: 'docs/intro' } },
    // Or use undefined for root
    { params: { path: undefined } },
  ];
}
---

Boolean Conditions

---
const items = [
  { slug: 'item-1', active: true },
  { slug: 'item-2', active: false },
];

// ❌ Using boolean as param
export function getStaticPaths() {
  return items.map((item) => ({
    params: { active: item.active }, // Boolean!
  }));
}

// ✅ Convert to string or filter
export function getStaticPaths() {
  return items
    .filter((item) => item.active)
    .map((item) => ({
      params: { slug: item.slug },
    }));
}
---

Null vs Undefined

---
// ❌ null is not valid
export function getStaticPaths() {
  return [
    { params: { slug: null } },
  ];
}

// ✅ undefined is valid for rest params only
// src/pages/[...path].astro
export function getStaticPaths() {
  return [
    { params: { path: undefined } }, // Matches /
    { params: { path: 'about' } },   // Matches /about
  ];
}
---

Date Objects

---
const posts = [
  { slug: 'post', date: new Date('2024-01-15') },
];

// ❌ Date object as param
export function getStaticPaths() {
  return posts.map((post) => ({
    params: { date: post.date }, // Object!
  }));
}

// ✅ Convert to string
export function getStaticPaths() {
  return posts.map((post) => ({
    params: {
      date: post.date.toISOString().split('T')[0], // '2024-01-15'
    },
  }));
}
---

ID Types

---
// ❌ BigInt not supported
export function getStaticPaths() {
  return [
    { params: { id: BigInt(123) } },
  ];
}

// ✅ Convert to string or number
export function getStaticPaths() {
  return [
    { params: { id: '123' } },
    { params: { id: 123 } },
  ];
}
---

Quick Checklist

• Param values must be string, number, or undefined
• Extract primitive values from objects
• Convert dates to ISO strings
• Use undefined only for rest parameters [...slug]
• null is never valid - use undefined instead