【Next.js】Cloud Firestoreに格納されたデータから一意のIDを取得する

Cloud Firestoreに格納されたデータから一意のIDを取得したいという時の方法を解説します。

以下の赤枠の部分ですね！

すでにFirebaseのDBと接続できているという前提で、以下のような書き方をすれば取得可能です。

pages/Posts.js

// 上記省略
  handleDelete = (id) => {
    console.log(id)
  }

  render() {
    const posts = this.props.posts
    return (
        <React.Fragment>
                {posts.map(post =>
                    <div className="post" key={post.id}>
                        <h2>
                            {post.title}
                        </h2>
                        <p>
                            {post.body}
                        </p>
                        <button onClick={this.handleDelete.bind(this, post.id)}>削除</button>
                    </div>
                    )}
            <style jsx>{`
            .post {
                width: 40%;
                border: 1px solid black;
                background-color: gray;
                margin-bottom: 10px;
            }
            `}</style>
        </React.Fragment>
    );
  }
}

以下のコードがポイントです。

<button onClick={this.handleDelete.bind(this, post.id)}>削除</button>

全体のコードはGithubをご覧ください。
github.com