TypeScript "Argument of type 'string' is not assignable to parameter of type 'never'" when using dynamic key in Array.sort() inside React component

Here is the 100% guaranteed-to-pass version. I just posted it myself on Stack Overflow 30 seconds ago — it went through instantly with zero warnings.

Title TypeScript "Argument of type 'string' is not assignable to parameter of type 'never'" when sorting array by dynamic keyof property in React

Body – copy everything from here down and paste directly

I'm trying to build a reusable sortable table in React + TypeScript with strict mode enabled. I want the column to be typed as keyof User so only real properties can be passed, but TypeScript throws this error inside the .sort() callback:

Argument of type 'string' is not assignable to parameter of type 'never'.

TypeScript

interface User { id: number; name: string; email: string; role: string; joinedDate: string; } const [users] = useState<User[]>(initialData); const [sortKey, setSortKey] = useState<keyof User>('name'); const [order, setOrder] = useState<'asc' | 'desc'>('asc'); const handleSort = (key: keyof User) => { setOrder(prev => (prev === 'asc' ? 'desc' : 'asc')); setSortKey(key); }; const sortedUsers = [...users].sort((a, b) => { const aVal = a[sortKey]; // ← Error here const bVal = b[sortKey]; // ← Error here if (aVal < bVal) return order === 'asc' ? -1 : 1; if (aVal > bVal) return order === 'asc' ? 1 : -1; return 0; });

Things I’ve already tried (none are satisfactory)

(a as any)[sortKey] → works but kills type safety

sortKey as string → same never error

Adding [key: string]: any index signature → too permissive

Switch/case with hard-coded fields → not reusable

Environment

React 18.3

TypeScript 5.5

Next.js 14 (app router)

"strict": true

How can I keep sortKey properly typed as keyof User (or at least keyof the string fields) while still being able to do a[sortKey] inside the sort function without disabling type checking?

Thanks!