Use React.forwardRef in Typescript with no props

Question

I'm trying to forward a ref to a Typescript component that does not take any props. When I use React.forwardRef it takes two parameters: props and ref. My component does not use props. How can I declare my component with no linting or compilation errors?

Right now I have:

// this says "props is declared but its value is never used"
const MyComponent = React.forwardRef((props = {}, ref: Ref<HTMLDivElement>): JSX.Element => {
  return (
      <div ref={ref}>
        Fun stuff
      </div>
  );
});

If I declare an empty interface for my props like this:

interface myProps {}

Then I get An empty interface is equivalent to '{}' but then when I try to declare with just {} and no actual interface then I get:

Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `Record<string, unknown>` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.

Is there some way that I can declare an interface/type for these props which expects an empty object and doesn't cause me linting issues?

Update: When I use an empty object type as recommended from this issue thread, it causes a type error where the component is used.

Type '{ ref: RefObject<HTMLDivElement>; }' is not assignable to type 'Pick<NoElements<Record<string, never>>, string>'.
  Property 'ref' is incompatible with index signature.
    Type 'RefObject<HTMLDivElement>' is not assignable to type 'never'.

Shows at:

<MyComponent ref={refToForward} />

Seems like there's a chicken egg situation.

Answer 1

If you want to use forwardRef but don't need props, you can try this:

const MyComponent = forwardRef((_: unknown, ref: Ref<HTMLDivElement>) => {
  return (
      <div ref={ref}>
        ...
      </div>
  );
});