typescript 型通してmap()から要素を取得する map()の~.idとか~.nameが欲しい時

‘DetailedHTMLProps, HTMLButtonElement>’ に割り当てることはできません。

もともとのきっかけのエラー文

(property) edit_user_id: string | undefined
型 ‘{ children: string; onClick: (e: MouseEvent<HTMLElement, MouseEvent>) => Promise<void>; edit_user_id: string | undefined; }'
を
型 ‘DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>’ に割り当てることはできません。
  プロパティ ‘edit_user_id’ は型 ‘DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>’ に存在しません。

「data-」という形でカスタムデータ属性を作成してmapで使う

下記のような形で定義する

const rows = props.data.map((item) => (
    <tr key={item.name}>
      <td>
        {/* data-edit_user_idがそれ　 edit_user_idだとエラーが出る*/}
        <button onClick={fetchEditUserId} data-edit_user_id={item.id}>
          編集
        </button>
      </td>
      <td>
      {/* data-delete_user_idがそれ　 delete_user_idだとエラーが出る*/}
        <button onClick={fetchDeleteUserId} data-delete_user_id={item.id}>
          削除
        </button>
      </td>
    </tr>
  ));

使う時はe.currentTarget.getAttribute("data-edit_user_id")とかする

// 削除ボタン
   const fetchDeleteUserId = (e: React.MouseEvent<HTMLElement>) => {
    const id = e.currentTarget.getAttribute("data-delete_user_id");
    // nullの可能性を排除
    if (!id) {
      return;
    }
    // 取得したidを渡す
    deleteUser(id);
  };

や

 const getUserById = useGetUser();
  // 編集ボタン
  const fetchEditUserId = async (e: React.MouseEvent<HTMLElement>) => {
    // ①押した変種ボタンからedit_user_idに格納されているidを取得
    const id = e.currentTarget.getAttribute("data-edit_user_id");
    if (!id) {
      return;
    }
    ~~~~~~他省略

みたいにする

以上
型通すのにかなり悩まされたのでメモを残す
data-でないとダメとかは、わかんないって・・・

参考
data-*
【React/TypeScript】onClickなどのイベント処理で要素ごとに引数を渡したい場合