Getting typescript error Type error: Type '() => Promise<{ message: string; } | undefined>' is not assignable to type 'string | ((formData: FormData)

Question

/component/button.tsx

"client component"

export const DeleteButton = ({ id }: { id: string }) => {
  const deleteImageWithId = deleteImage.bind(null, id);
  return (
    <form
      action={deleteImageWithId}
      className="py-3 text-sm bg-gray-50 rounded-br-md w-full hover:bg-gray-100 text-center"
    >
      <DeleteBtn />
    </form>
  );
};

/lib/actions.ts

"server component"

// Delete Image
export const deleteImage = async (id: string) => {
  const data = await getImageById(id);
  if (!data) return { message: "No data found" };

  await del(data.image);
  try {
    await prisma.upload.delete({
      where: { id },
    });
  } catch (error) {
    return { message: "Failed to delete data" };
  }

  revalidatePath("/");
};

Error message:

./components/button.tsx:44:7 Type error:
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'Promise<void>'.
  Type '{ message: string; } | undefined' is not assignable to type 'void'.
  Type '{ message: string; }' is not assignable to type 'void'.

Yakk - Adam Nevraumont · Accepted Answer · 2025-02-11 15:17:31Z

1

() => Promise<{ message: string; } | undefined> is the type of deleteImageWithId, aka deleteImage.bind(null,id). You take no arguments () and return a promise of either an object containing a field message which is a string, or something undefined.

You are trying to put that object somewhere that expects an object of type string | ((formData: FormData) => void | Promise) | undefined.

This is probably action; as the action of a form, it is passed the form data. Your form is pretty empty.

Probably the easiest way to deal with this would be to create a lambda wrapper that takes a FormData and throws it away.

const deleteImageWithId = async (discard: FormData)=>{
  /* await maybe? */ deleteImage(id);
};

Something like that should fix up the type of deleteImageWithId so it matches one of the expected signatures of action.

Failing the above working, you may have to modify deleteImage to not return { message: "whatever" } that isn't being consumed by the code using it, or write a wrapper that uses that to do something.

edited Feb 11 at 15:17

answered Feb 11 at 15:12

Yakk - Adam Nevraumont

280k31 gold badges367 silver badges584 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eko pram Feb 11 at 16:09

thanks for answering my question, thats working

eko pram Feb 12 at 4:20

can you recommend me the topic should i read for this situation?

Yakk - Adam Nevraumont Feb 12 at 15:24

@ekopram It is a mixture of TypeScript and how JS Promises work and learning how to read error messages.

Collectives™ on Stack Overflow

Getting typescript error Type error: Type '() => Promise<{ message: string; } | undefined>' is not assignable to type 'string | ((formData: FormData)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related