How to Fix Urlsearchparams Error in TypeScript

URLSearchParams Errors in TypeScript

TypeScript adds type safety to URLSearchParams, but errors still slip through when dealing with unknown types from API responses or loosely typed config objects.

Why It Happens

• Record<string, number> passed where Record<string, string> is needed
• Union types not narrowed before constructing params
• undefined values in the parameter object

How to Fix

Create a type-safe wrapper:

function buildSearchParams(
  params: Record<string, string | number | boolean | undefined>
): URLSearchParams {
  const searchParams = new URLSearchParams();

  for (const [key, value] of Object.entries(params)) {
    if (value !== undefined && value !== null) {
      searchParams.set(key, String(value));
    }
  }

  return searchParams;
}

// Usage
interface SearchFilters {
  query: string;
  page?: number;
  active?: boolean;
}

function buildSearchUrl(base: string, filters: SearchFilters): string {
  const url = new URL(base);
  const params = buildSearchParams(filters);
  url.search = params.toString();
  return url.toString();
}

const url = buildSearchUrl('https://api.example.com/search', {
  query: 'typescript errors',
  page: 2,
});

This wrapper handles type conversion automatically and skips undefined values.

Avoiding Recurrence

Once you fix this error, add a regression test that reproduces the exact scenario. Document the root cause in your team's knowledge base so others can recognize the pattern. Configure monitoring alerts for early detection if the issue appears again in a different part of the codebase.

Bugsly for TypeScript

Bugsly preserves TypeScript source maps, so URLSearchParams errors point to your original .ts file and line number rather than compiled JavaScript.