TanStackT
TanStack•3mo ago•
2 replies
popular-magenta

Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`

I've recently tried to update my code all the way up to the latest version and noticed a few eslint issues here and there in my codebase.

I could trace it down to a change between 1.132.0-alpha.4 and 1.132.0-alpha.8.

I get the following error:
Unsafe assignment of an any value @typescript-eslint/no-unsafe-assignment
on this line of code:
  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });


We have a structure, where all our URLs start with frontend/src/routes/company/$companyId/site/$siteId, so we are quite confident both those variables exist.

Another example where we get this is:
  const { inspectType, inspectId } = useSearch({ strict: false });


But we are quite confident those two search-params exist, because our root component is defined as:
const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});


The type we see on hover in our editor are not any, so it could also be a problem of the eslint rule.

Any help would be appreciated!
Was this page helpful?